naritoブログ

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

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

Bootstrap3、余白について

約961日前 2016年3月28日5:55
プログラミング関連
Bootstrap3
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>
名無し 約503日前 2017年6月29日2:53 返信する
何だこの記事、有能過ぎる。
たまげたなぁ。