ブートストラップ3列でコンテナ全体がいっぱいにならない

Question

ブートストラップが初めてです。次のコードでは、最初の行はコンテナに完全には記入されませんが、2行目（行内にあるクラス）はコン​​テナ全体を埋めることになります。ですから、コンテナ全体を埋めるには、常に ""に入れ子にする必要があります。

<div class="container" style="background:#00f"> 
    <!--<div class="row" style="background-color: #2fa4e7">--> 
     <div class="col-xs-2" style="background-color: red"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2" style="background-color: red"> 
      col 
     </div> 
    <!--</div>--> 

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

あなたのCSSに以下を追加した場合は、「行」は、列のように動作を開始します：

.row { 
    margin-left: 0px; 
    margin-right: 0px; 
} 

言い換えれば、なぜ行がで負のマージンを持っている理由は、私が思っていましたデフォルト？

Answer 1

あなたは全体のコンテナのパディングを削除しようとする場合があります。

.container { 
     padding-left: 0px !important; 
     padding-right: 0px !important; 
} 
.container .row { 
     margin-left: 0px !important; 
     margin-right: 0px !important; 
} 

スニペット：

.container { 
 
    padding-left: 0px !important; 
 
    padding-right: 0px !important; 
 
} 
 
.container .row { 
 
    margin-left: 0px !important; 
 
    margin-right: 0px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container" style="background:#00f"> 
 
    <!--<div class="row" style="background-color: #2fa4e7">--> 
 
    <div class="col-xs-2" style="background-color: red"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2" style="background-color: red"> 
 
     col 
 
    </div> 
 
    <!--</div>--> 
 

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