naritoブログ

【お知らせ】
新ブログができました。今後そちらで更新し、このサイトは更新されません(ウェブサイト自体は残しておきます)
このブログの内容に関してコメントしたい場合は、新ブログのフリースペースに書き込んでください

このブログの内容を新ブログに移行中です。このブログで見つからない記事は、新ブログにありま

Bootstrap、rowの役割

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

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

となります。

http://torina.top/detail/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>