(Bootstrap)親要素左側の子要素を画面端一杯にはみ出させたい

前提・実現したいこと

お世話になります。
BootStrap4を使用したレイアウトで、子要素(ko-left)の左端を親要素(Bootstrapの.containerクラス)から画面の端まで
はみ出させるようにしたいのですが、
https://teratail.com/questions/156166
こちら参考にして右側はできたのですが左側を同じようにはみ出させる方法が思い付かず悩んでいます。
手書きですみませんが画像のようにしたいです。
![

###ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>sample</title>
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9    <link rel="stylesheet" type="text/css" href="style.css">
10</head>
11
12<body>
13    <div class="wrapper">
14        <div class="container">
15                <div class="ko">
16                    <div class="content">
17                        <h4>サンプル</h4>
18                        <p class="text">
19                            サンプル
20                            <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプル
21                        </p>
22                    </div>
23                </div>
24
25                <div class="ko-left">
26                    <div class="content">
27                        <h4>サンプル</h4>
28                        <p class="text">
29                            サンプル
30                            <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプル
31                        </p>
32                    </div>
33                </div>
34
35                <div class="ko">
36                    <div class="content">
37                        <h4>サンプル</h4>
38                        <p class="text">
39                            サンプル
40                            <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
41                        </p>
42                    </div>
43                </div>
44
45                <div class="ko-left">
46                    <div class="content">
47                        <h4>サンプル</h4>
48                        サンプル
49                    </div>
50                </div>
51
52                <div class="ko">
53                    <div class="about">
54                        <div class="content">
55                            <h4>サンプル</h4>
56                            <p class="text">サンプル</p>
57                            <br />
58                        </div>
59                    </div>
60                </div>
61        </div>
62    </div>
63</body>
64
65</html>
66
67

CSS
1.wrapper{
2    max-width: 1200px;
3}
4
5.ko {
6  margin-top: 3rem;
7  margin-left: 5rem;
8  width: calc(100vw - 50px); /*ビューの100% - 50px（左側のマージン）*/
9  background-color: white;
10  box-shadow: 0 0 1px #000000;
11  height: 200px;
12}
13.ko-left {
14  display: block;
15  margin-top: 3rem;
16  width: 70%;
17  background-color: white;
18  box-shadow: 0 0 1px #000000;
19  height: 200px;
20}
21
22.content {
23  padding: 2rem;
24}

補足情報

ブラウザはChrome使用です。

よろしくお願いいたします。

hatena19

2020/01/20 22:53 編集

親要素は具体的にどの要素ですか。wrapper？ container？また子要素もどれですか。子要素をはみ出させるとのことですか、どこまではみ出させるのですか。スクリーンの端までですか？画像の1200pxというのは何の幅ですか？スクリーンの幅？ container というクラス名は BootStrap4 で使っているものですが、それを意識して使用してますか。上記の点について質問に追記してください。

yk_dev

2020/01/21 08:05

追記・修正依頼ありがとうございます。情報が足りずすみませんでした。 BootStrapを使用した親要素(.container）内左側の子要素を画面左端一杯まではみ出させたいという内容なので、タイトル・文章を一部変更、また左端に出したい子要素を「ko-left」としました。

yk_dev

2020/01/21 08:08

1200pxはスクリーン幅の想定を書いたものなのですが、最終的にレスポンシブにしたいので、あまり意味はないです、すみません。

行動規範の内容に同意します

回答1件

ベストアンサー

こちら参考にして右側はできたのです

できてません。画面幅を完全にはみ出しているので、くっついているよう見えるだけです。そんな単純なものではないです。

まずは、BootStrap4の.containerクラスの仕様を確認しましょう。

Grid system - Bootstrap 4.2 - 日本語リファレンス

上記の「Grid options」の表に画面サイズと.container の幅の関係があります。
これを見ると.container の幅は画面幅に応じて、Auto(100%) 540px 720px 960px 1140px というように段階的に変わることが分かります。

これを元に、メディアクエリでそれぞれの画面幅に応じた子要素の幅を calcで計算することになります。

が、その前にHTMLで containerクラスを wrapperクラスで囲むのはやめましょう。 containerクラスで画面の中央に配置する設定になってますが、それを別の要素で囲んでしまってはそれがうまく機能しなくなります。ということでwrapperクラスのタグは削除しておいてください。

まず表によると、画面幅が576px未満は100%なので画面幅と.container の幅は同じになります。ということで子要素も幅100%で画面一杯になります。ここは単純に下記のような設定でいいでしょう。

小さい画面を最初に設定して、より大きい画面の設定はそれを上書きしていく手法（モバイルファースト）で行きますので、最初はメディアクエリは必要ありません。

css
1.ko, .ko-left {
2  width: 100%;
3}

次に、画面幅576px以上になるとcontainer幅 540pxになります。
左右余白は、画面幅 - 540px となり、左余白、右余白は (画面幅 - 540px)/2 で計算できます。
子要素の幅は、container幅 + 左余白にすればいいことになります。
また、.ko-left を左端に寄せるには、margin-left を左余白*(-1) とネガティブマージンを設定します。

ということで、メディアクエリで下記のように設定します。

css
1@media (min-width: 576px) {
2  .ko {
3    width: calc((100vw - 540px)/2 + 540px - 15px);
4  }
5  .ko-left {
6    width:calc(((100vw - 540px)/2) + 540px - 12px) !important;
7    margin-left:calc(((100vw - 1140px)/2)*-1 - 7px);
8  }
9}