naritoブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

Bootstrap3、余白について

プログラミング関連 Bootstrap3 約624日前
2016年3月28日5:55
Bootstrap3の余白についてのメモです。Bootstrap4も基本的には同様です。

まずはこちらを見てみましょう。わかりやすいよう、背景色をつけています


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>余白について</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1 style="background-color: red;">h1</h1>
    <div class="container-fluid">
      <div class="row">
        <h1 style="background-color: red;">container-fluid > row > h1</h1>
        <div class="col-xs-12">
          <h1 style="background-color: red;">container-fluid > row > col-xs-12 > h1</h1>
        </div>
      </div>
      <h1 style="background-color: red;">container-fluid > h1</h1>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


Bootstrapのbodyには margin: 0;が指定されているため、CSSを読み込んだ段階では余白はありません
body {
    margin: 0;
}


container・container-fluidを使った場合は左右に15pxの余白ができます
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


そしてrowでは、左右に15pxづつ広げます。
containerとrowだと、余白が0になります
.row {
    margin-right: -15px;
    margin-left: -15px;
}


そして案外忘れがちですがcol-xs-12等にも余白は設定されています
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}


ついでに、formをグリッドシステムするときに使うform-forizontalとform-groupですが、
こちらには以下の設定がされています。つまり、form-horizontalを使っていればform-groupをrowの代わりに使用できるということです。
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}

今回はcontaner-fluidを使いましたが、containerにするとどうでしょうか。
こうなってしまいました。container> row > h1も余白が目立ちますね


    <h1 style="background-color: red;">h1</h1>
    <div class="container">
      <div class="row">
        <h1 style="background-color: red;">container > row > h1</h1>
        <div class="col-xs-12">
          <h1 style="background-color: red;">container > row > col-xs-12 > h1</h1>
        </div>
      </div>
      <h1 style="background-color: red;">container > h1</h1>
    </div>



containerとcontainer-fluidの違いは、以下のとおりです
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


containerの場合は、ウィンドウ幅に応じてwidthが固定されます
わかりやすくいうと、containerの場合は以下のようになります

ウィンドウ幅、770px (widthが、750pxとして固定されている)


ウィンドウ幅、980px (widthが、まだ750pxとして固定されている)


ウィンドウ幅、1000px (widthが、970pxとして固定されている)


このように、ウィンドウ幅によっては余白が増えます

container-fluidを使った場合は、ウィンドウ幅に関係なく左右15pxの余白となります


ヘッダー・フッターやナビゲーションをウィンドウ幅マックスにしたい場合は、単純にcontainerの外に書くのがお勧めです
他の方法だと、container-fluid > row でも幅一杯になります。
container > row だと、ウィンドウ幅によっては余白ができます


    <header class="jumbotron" style="background-color: red">
      <h1 class="jumbotron-h1">ヘッダー画像等</h1>
    </header>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Home</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="nav">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container-fluid">
      <h1>コンテンツ</h1>  
    </div>
    
    <footer style="background-color: blue">
      <h1>フッター画像等</h1>
    </footer>
約166日前 名無し 2017年6月29日2:53 返信する
何だこの記事、有能過ぎる。
たまげたなぁ。