Wie erstellt man 5 gleiche Spalten in Bootstrap 3?

Question

Ich erstelle einen Auswahllink mit 10 Containern. Und was ich will, ist sie in 5 gleiche Spalten zu teilen. Jetzt ist mein Problem, ich möchte die Breite der Spalten erweitern. Bedeutet, dass ich keine container Klasse in meiner Elternreihe habe.

Hier ist mein Beispielcode:

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

Hier ist, was die Ausgabe sein sollte:

Und hier ist, was ich habe:

, dass alle Jungs ist Ich hoffe, kann mir helfen.

Hier ist die Probe Geige: https://jsfiddle.net/mk7bdyey/

Answer 1

Sie haben soeben eine neue Spalte alle zusammen

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

Weiter Sie Breite von neuen Klassen bei unterschiedlichen Medienanfragen definieren müssen schaffen könnten.

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

dann können Sie genau wie diese verwenden

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

Answer 2

Passen Sie die Polsterung von links und rechts wie pro Ihre Anforderung an die div, in denen Sie id="categories-selections" gegeben. Sie können CSS-in-line setzen wie style="padding-left:30px; padding-right:30px;"