Center-Ausrichtung einer Reihe von Spalten in Bootstrap

Question

Ich benutze Bootstrap. Ich habe eine Reihe mit vielen Spalten der Größe 3.

<div class= "row1" style = margin-left: auto, margin-right: auto"> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div> 
<div class = col-md-3" > <!--content--> </div>. 
. 
. 
. 
</div> 

CSS:

.row1{ 

    text-align:center; 
    margin:0 auto; 

} 

Das Bild zeigt, wie die gerenderten html wie folgt aussieht:

Ich will nicht die leerer Bereich und möchten, dass sich die Spalten horizontal zentrieren. Gibt es eine Möglichkeit, dies zu tun? Ich brauche die Größe, um spezifisch 3 zu sein (ich weiß, dass es nicht 12 ergibt, daher das Dilemma). All die Hilfe wird sehr geschätzt, danke im Voraus!

Answer 1

Säule (col-*-*) Element hat float:left; standardmäßig aktiviert und Sie können Floats nicht ausrichten so müssen Sie display:inline-block; und remove the extra spaces verwenden, die durch display:inline-block; aufgetreten ist.

CSS:

.row1{ 
    text-align:center; 
    margin:0 auto; 
} 

.row1 .col-md-3{ 
    display:inline-block; 
    vertical-align: middle; 
    float: none; 
} 

HTML:

<div class="row1"> 
     <div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div><!-- 
    --><div class="col-md-3"> 
     <!--content--> 
     </div> 
</div>