

基本的に`Bootstrap`は`.container`で括ってその中で`.row`を記述していく書き方をします。  
なのに何故、わざわざ`Bootstrap`は`.container`で`15px`して`.row`で`-15px`しているのでしょうか？

該当ソースリンク：  
<https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-
grid.css#L22>  
<https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-
grid.css#L62>


CC BY-SA 4.0
2018-07-07T22:16:06.047
45401
2020-01-25T12:16:10.353
2020-01-25T02:39:59.057
32986
9008
question
css twitter-bootstrap
どうして.containerで15pxして.rowで-15pxするのでしょうか？


`.container`の中に`.row`しか書かないのであれば、`.container`で`15px`して`.row`で`-15px`するのは無駄ですよね。

しかし、`.container`は名前のとおり入れ物なので`.row`以外のものを入れることも多いです。例えば、下のような例を考えると、`.container`で`15px`して`.row`で`-15px`していることによって、「タイトル」と「文章」とグリッド内の表示が自然に揃います。要するに開発者が使いやすくするためでしょう。

[code]

    <div class="container">
      <h2>タイトル</h2>
      <p>文章<p>
      <div class="row">
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
      </div>
    </div>
    
[/code]


CC BY-SA 4.0
2018-07-08T02:23:20.363
45409
2018-07-08T02:23:20.363
15171
45401
answer


row の中で マイナスマージンを使うのは その中に プラスマージンの 要素を入れることが  
目的だからではないでしょうか？

float で 複数の BOX を row の 中に入れると思いますが、自動的にきれいに折り返して  
表示するための工夫だったような・・。

探してみたら [その部分を 解説しているサイトがありました。](https://www.m-hand.co.jp/coding/1285/)  
「マイナスの値も指定可能！」の部分。

Bootstrap を使えば このような CSS の細かなトリックを知らずに  
きれいなレイアウトができるので人気なんだと思います。


CC BY-SA 4.0
2020-01-25T12:01:37.247
62541
2020-01-25T12:16:10.353
2020-01-25T12:16:10.353
18851
18851
45401
answer