BootStrap コンテンツの幅が意図しない形となる

BootStrapでcolを利用してcol-3を左サイド・col-9を右サイドに分けた2カラムレイアウトを実装したいのですが、横幅が意図しない形で大きくなり、単位でいうと100vw以上大きくなってしまいます。

Googleのdev機能で検証したところcol-9の中にあるcontainerクラスがどうやら横幅を大きくしている様です。

下記の画像は少し見にくいかと思いますが、上の部分の様に少し大きくなってしまっているのがわかるかと思います。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6</head>
7<body>
8  <div id="app" class="container-fluid">
9    <div class="row">
10      <div class="card col-3 px-0 border-0 rounded-0">
11        <ul class="list-group list-group-flush">
12          <li class="list-group-item"><a href="#"><i class="fas fa-unlock-alt fa-fw"></i>Login</a></li>
13          <li class="list-group-item"><a href="#" ><i class="fas fa-user fa-fw"></i>会員登録</a></li>
14        </ul>
15      </div>
16      <div class="col-9 px-0">
17        <main class="content px-0 mt-5">
18          <!--  -->
19        </main>
20      </div>
21    </div>
22  </div>
23</body>
24</html>
25

変更後、以下の様にnavに余白が生まれてしまう。

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

回答1件

ベストアンサー

Chrome のデベロッパーツールで検証してみると、.row は下記のように設定されてます。

css
1.row {
2    display: -ms-flexbox;
3    display: flex;
4    -ms-flex-wrap: wrap;
5    flex-wrap: wrap;
6    margin-right: -15px;
7    margin-left: -15px;
8}

左右マージンに -15pxとネガティブマージンが設定されているのでその分の親要素の範囲よりはみ出ます。提示のHTMLでは親要素にはwidthが設定されていないので、幅は100%となり、そこから左右に15pxはみ出るのが原因でしょう。
親要素(#id)にwidthを設定すると親要素から.rowがはみ出ているのが分かります。

これを解決するには、親要素に、containerクラスまたはcontainer-fluidクラスを付与します。

html
1前略
2<body>
3  <div id="app" class="container-fluid"> <!-- 修正 -->
4    <div class="row">
5      <div class="card col-3 px-0 border-0 rounded-0 Nav">
6      </div>
7      <div class="col-9 px-0">
8        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm px-0">
9          <div class="container-fluid">  <!-- 修正 -->
10
11後略

.container と .container-fluid には

css
1.container {
2    width: 100%;
3    padding-right: 15px;
4    padding-left: 15px;
5    margin-right: auto;
6    margin-left: auto;
7}

というように左右パディングが15px設定されているので、.row の左右マージンを打ち消すのではみ出なくなります。

Bootstrap のグリッドシステムは
コンテナ（.container または.container-fluid）
行　（.row）
列　（.col）
の３つを入れ子にしてレイアウトを決めるという前提で設計されているので、
行（.row）はコンテナ内に配置しないと今回のような症状ででることになります。

投稿2020/09/09 13:12

編集2020/09/13 02:34

hatena19

総合スコア34075

n-choco

2020/09/09 14:48

ありがとうございます！無事解決することができました。そのclassに指定されているスタイリングを確認すればすぐに解決できる様な問題だと改めて感じました。

n-choco

2020/09/09 14:53 編集

すいません。そうするとnavbarがページが想定したものよりも小さくなってしまいました。

n-choco

2020/09/09 14:54

800px以上にした際にはcol-3とcol-9の合計12個分では余白が生じてしまう様です。。

hatena19

2020/09/10 02:04

> そうするとnavbarがページが想定したものよりも小さくなってしまいました。左右マージンの -15px の設定で 30px分はみ出ていたのが解消されるので、その分小さくはなります。 col-9 が効いてますので画面幅の75%になっているはずですが、どのような想定をしてましたか。 > 800px以上にした際にはcol-3とcol-9の合計12個分では余白が生じてしまう様です。。 <div id="app" class="container">としてませんか。もし、そうなら仕様通りです。画面幅一杯に広げたいなら、<div id="app" class="container-fluid"> と設定してください。

n-choco

2020/09/10 12:06

classはご指摘通りcontainer-fluidにしましたのですが、意図しない様です。。画像を改めて添付させていただきましたのでご確認いただけると幸いです。

hatena19

2020/09/10 12:39 編集

他にも class="container" があるのでそれを class="container-fluid" に修正したらどうなりますか。回答のコードも修正しましたので参照してください。

n-choco

2020/09/10 13:58

修正ありがとうございます。確認してみたのですが変化ありませんでした、、こちらのコードも提示させていただきます。

n-choco

2020/09/10 14:00

先ほどからnavbarと言っていましたが正しくはheaderのことでした。申し訳ありません。