Warum Bootstrap Spalten mit Leerzeichen zeigt

Question

Ich habe einen einfachen Abschnitt in Bootstrap, der 6 Spalten enthält, gemacht. Also tat ich dies in den HTML-Code:

<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> 

Aber wenn ich es in Browser testen es zeigt mir dies:

So wie Sie sehen können, habe ich die genannten Teile aus denen EXTRA SPACE und ich nicht warum!

Und hier ist der CSS-Code:

.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;} 

Also, was falsch hier los ist und warum ich diese unbekannten Räume zwischen den Spalten zu bekommen?

Answer 1

Das liegt daran, weil BoostRap standardmäßig padding-left und padding-right von 15px hat, also setze es einfach zurück.

.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>