Jak utworzyć 5 równych kolumn w Bootstrap 3?

Question

Tworzę łącze zaznaczenia, które ma 10 kontenerów. A ja chcę podzielić je na 5 równych kolumn. Teraz mój problem polega na tym, że chcę rozszerzyć szerokość kolumn. Oznacza, że ​​nie mam klasy container w moim wierszu nadrzędnym.

Oto mój przykładowy kod:

<div id="categories-selections"> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat1.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat2.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat3.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat4.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat5.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat6.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat7.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat8.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat9.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat10.png" class="img-responsive" /> 
    </div> 

</div> 

Oto, co powinno być wyjście:

A oto co mam:

to wszystko chłopaki Mam nadzieję, że Może mi pomóc.

Oto skrzypce próbki: https://jsfiddle.net/mk7bdyey/

Answer 1

Można po prostu stworzyć zupełnie nową kolumnę razem

.col-xs-15, 
.col-sm-15, 
.col-md-15, 
.col-lg-15 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; 
} 

Następnie należy określić szerokość nowych klas w przypadku różnych zapytań multimedialnych.

.col-xs-15 { 
    width: 20%; 
    float: left; 
} 
@media (min-width: 768px) { 
.col-sm-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 992px) { 
    .col-md-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 1200px) { 
    .col-lg-15 { 
     width: 20%; 
     float: left; 
    } 
} 

następnie można po prostu użyć jak ten

<div class="row"> 
    <div class="col-md-15 col-sm-3"> 
    ... 
    </div> 
</div> 

Answer 2

Regulacja wyściółkę z lewej i prawej strony, jak na swoje wymagania do div w którym dałeś id="categories-selections". można umieścić w-line css jak style="padding-left:30px; padding-right:30px;"