torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

Bootstrap、rowの役割

HTMLとCSSとJavaScript Bootstrap3 Bootstrap3
約332日前 2016年4月1日8:12
今回はBootstrapのrowの役割についてのメモです。
結論から書くと、rowを使うタイミングは、

・containerで作られる15pxの余白を詰めたい
・グリッドシステム(col-xs)を使用する際

となります。

http://torina.top/main/164/
こちらにも書きましたが、まずcontainer、もしくはcontainer-fluidで15pxの余白ができます。
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


そして、rowでそれを打ち消します
.row {
    margin-right: -15px;
    margin-left: -15px;
}


container-fluidを使っているならば、rowを使うことで余白が0になるということです。
ウィンドウ幅全体に表示するようなもの、ヘッダー画像等はcontainer-fluidの外に書くほうが分かりやすいとは思いますが、
状況によってはcontainer-fluidの中に書かなければいけない場合もあるかと思います。

もうひとつ、グリッドシステムを使う際ですが、まずrowを使った場合と使わない場合の見た目です。


<!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>rowについて</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>
    <div class="container-fluid">

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

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

    </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>


container-fluidとrowで余白が0になると言いましたが、グリッドシステムの場合は少し別です。
というのも、col-xs- などに下記の設定がされているためです。
こちらも、以前の記事に書きました。
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;


わかりやすいように、もうひとつ。


    <div class="container-fluid">

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

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

    </div>



このように、rowを使うとcontainer-fluid直下の要素と揃えることができますね。
これだけならまだいいのですが、グリッドシステムの仕様上、rowを使わないと痛い目にあうことがあります。

例えば、グリッドシステムを使っていて、右側を少しあけたいと思ったとします。
この場合は以下のように、col-xs-6、col-xs-3と書いてみます。
    <div class="container-fluid">

      <div class="col-xs-6">
        <h1 style="background-color: red;">一段目、col-xs-6</h1>
      </div>

      <div class="col-xs-3">
        <h1 style="background-color: red;">一段目、col-xs-3</h1>
      </div>

    </div>


ちゃんと動作していますね。



2段目にボタンを配置したいとしましょう。次のようにしたいわけです。


中身はこうしてみたとします。
    <div class="container-fluid">

      <div class="col-xs-6">
        <h1 style="background-color: red;">一段目、col-xs-6</h1>
      </div>

      <div class="col-xs-3">
        <h1 style="background-color: red;">一段目、col-xs-3</h1>
      </div>

      <input type="button" class="btn btn-primary" value="2段目ボタン">

    </div>


しかし、事態は思うようには進みません。こうなります。



では、中身が空のcol-xs-3を作って合計12にすればいいのでは?と思うかもしれません。
    <div class="container-fluid">

      <div class="col-xs-6">
        <h1 style="background-color: red;">一段目、col-xs-6</h1>
      </div>

      <div class="col-xs-3">
        <h1 style="background-color: red;">一段目、col-xs-3</h1>
      </div>

      <div class="col-xs-3">

      </div>

      <input type="button" class="btn btn-primary" value="2段目ボタン">

    </div>



結果はこうなります。



もっとわかりやすい例にしますと、
    <div class="container-fluid">

      <div class="col-xs-6">
        <h1 style="background-color: red;">一段目、col-xs-6</h1>
      </div>

      <div class="col-xs-3">
        <h1 style="background-color: red;">一段目、col-xs-3</h1>
      </div>

      <div class="col-xs-3">
      <h1 style="background-color: red; height:30px;">一段目、col-xs-3</h1>
      </div>

      <input type="button" class="btn btn-primary" value="2段目ボタン">

    </div>


このようになります。




グリッドシステムの仕様ですが、以下のようになっています。
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}


今回重要なのは以下です。
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.row:after {
  clear: both;
}


col-ではfloat:leftでの左寄せを行っています。
それをclear: bothしているのがrowということです。
先ほどボタンが1段目にねじ込まれていたのは、float:leftの後にclear:bothをされていなかったためです。
なので、例えば、例えばですが以下のようにすると
    <div class="container-fluid">

      <div class="col-xs-6">
        <h1 style="background-color: red;">一段目、col-xs-6</h1>
      </div>

      <div class="col-xs-3">
        <h1 style="background-color: red;">一段目、col-xs-3</h1>
      </div>

      <!-- clear: both と同義 -->
      <div class="clearfix"></div>

      <input type="button" class="btn btn-primary" value="2段目ボタン">

    </div>


希望のレイアウトにはなります。


ですが、当然rowを使うべきでしょう。container-fluid直下の要素と揃えれるし、何より「row」と書くことで明示的に示しているのもわかりやすいです。
    <div class="container-fluid">

      <div class="row">
        <div class="col-xs-6">
          <h1 style="background-color: red;">一段目、col-xs-6</h1>
        </div>
        <div class="col-xs-3">
          <h1 style="background-color: red;">一段目、col-xs-3</h1>
        </div>
      </div>
      
      <input type="button" class="btn btn-primary" value="2段目ボタン">

    </div>