ブートストラップがスペースを含むカラムを表示する理由

Question

6つのカラムを含むブートストラップで簡単なセクションを作成しました。

<div id="content"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-2"> 
         <div class="box one"> 
         </div> 
        </div> 
        <div class="col-lg-2"> 
         <div class="box two"> 
         </div> 
        </div> 
        <div class="col-lg-2"> 
         <div class="box three"> 
         </div> 
        </div> 
        <div class="col-lg-2"> 
         <div class="box four"> 
         </div> 
        </div> 
        <div class="col-lg-2"> 
         <div class="box five"> 
         </div> 
        </div> 
        <div class="col-lg-2"> 
         <div class="box six"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

しかし、私は、ブラウザでそれをテストするときには、この私を示しています：だから私は、HTMLでこれをやった

あなたが見ることができるように、私が持っている部品を言及しています余分なスペースと私はなぜそうではありません！

そしてここでCSSのコードは次のとおりです。

.box{ 
height:200px; 
width:100%; 
} 

.one{background-color:#A0522D;} 
.two{background-color:#FAFAD2;} 
.three{background-color:#F08080;} 
.four{background-color:#778899;} 
.five{background-color: #FFA07A;} 
.six{background-color:#20B2AA;} 

だから何が間違ってここに起こっていると、なぜ私は列の間のこれらの未知のスペースを取得していますか？

Answer 1

デフォルトでは、boostrapはpadding-leftとpadding-rightが15pxであるため、リセットするだけです。

.box { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
[class*="col-"] { 
 
    padding: 0 !important 
 
} 
 

 
.one { 
 
    background-color: #A0522D; 
 
} 
 

 
.two { 
 
    background-color: #FAFAD2; 
 
} 
 

 
.three { 
 
    background-color: #F08080; 
 
} 
 

 
.four { 
 
    background-color: #778899; 
 
} 
 

 
.five { 
 
    background-color: #FFA07A; 
 
} 
 

 
.six { 
 
    background-color: #20B2AA; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="content"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-2"> 
 
     <div class="box one"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <div class="box two"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <div class="box three"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <div class="box four"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <div class="box five"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <div class="box six"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>