horizontal zentriert Bootstrap Spalten

Question

JSFIDDLE

Ich habe einen Fall, wo ich meine Bootstrap-Spalten wollen horizontal selbst zentrieren.

Um dies zu erreichen, habe ich die folgenden Regeln verwendet

CSS:

div[class^=col-] { 
    float: none;/* Overwrites float left */ 
    display: inline-block; 
    vertical-align: top; 
    width: 25%; 
} 

Dann Wenn vier Spalten sind sie in einer Linie kommen sollte. Und wenn es 3 Spalten gibt, sollten sie zentriert sein.

HTML:

<!-- The fourth column falls down --> 
<div class='row text-center'> 
    <div class="col-xs-3 col-1">Hi</div> 
    <div class="col-xs-3 col-2">Hi</div> 
    <div class="col-xs-3 col-2">Hi</div> 
    <div class="col-xs-3 col-2">Hi</div> 
</div> 
<!-- Works Fine and centers the columns -->  
<div class='row text-center'> 
    <div class="col-xs-3 col-1">Hi</div> 
    <div class="col-xs-3 col-2">Hi</div> 
    <div class="col-xs-3 col-2">Hi</div> 
</div> 

Es funktioniert gut, wenn ich nur 1,2 oder 3 Spalten haben, aber wenn ich 4 Spalten erhalten, eine der Spalten fällt in eine neue Zeile nach unten. Um dieses Problem zu lösen, habe ich versucht, die Breite zu reduzieren, um 24.7% zu sagen. Aber das funktioniert nicht auf allen Bildschirmen. Also muss ich die Breite ändern.

Ich würde gerne wissen, warum Breite 25% nicht die 25% Breite und fällt. Und wie man dieses Problem löst und sie immer in der Mitte hält.

JSFIDDLE

Answer 1

Bitte entfernen:

div[class^=col-] { 
    float: none;/* Overwrites float left */ 
    display: inline-block; 
    vertical-align: top; 
    width: 25%; 
} 

und Sie können zur .row Klasse hinzufügen:

.row { 
    display: flex; 
    justify-content: center; 
} 

Wenn Sie Bootstrap v4 dort verwenden Flexbox Klassen hinzugefügt werden, die Sie verwenden können: https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 2

display: flex Gib die row zu. Die Verwendung dieser Methode funktioniert auf allen Bildschirmen.

Fiddle

div[class^=col-] { 
 
    float: none; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 25%; 
 
} 
 
body { 
 
    color: white; 
 
} 
 
.row { 
 
    margin-bottom: 50px; 
 
    display: flex; 
 
} 
 
.col-1 { 
 
    background: red; 
 
} 
 
.col-2 { 
 
    background: blue; 
 
}

<!-- The fourth column falls down --> 
 
<div class='row row-1 text-center'> 
 
    <div class="col-xs-3 col-1">Hi</div> 
 
    <div class="col-xs-3 col-2">Hi</div> 
 
    <div class="col-xs-3 col-2">Hi</div> 
 
    <div class="col-xs-3 col-2">Hi</div> 
 
</div> 
 
<!-- Works Fine and centers the columns --> 
 
<div class='row text-center'> 
 
    <div class="col-xs-3 col-1">Hi</div> 
 
    <div class="col-xs-3 col-2">Hi</div> 
 
    <div class="col-xs-3 col-2">Hi</div> 
 
</div> 
 

 

 
<!-- Post Info --> 
 
<div style='position:fixed;bottom:0;left:0;  
 
      background:lightgray;width:100%;'> 
 
    About this SO Question: <a href='http://stackoverflow.com/q/23502342/1366033'>Bootstrap 3 grid, does it *really* matter how many columns are in a row?</a><br/> 
 
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/> 
 
<div>

Answer 3

Sie sollten eine Sonderklasse erstellen (zB: row-centered) für diesen Fall, und nicht Überschreibung der Bootstrap Gitter.

.row-centered > div { 
    display: inline-block; 
    float: none; 
} 

http://www.codeply.com/go/EXmotvfGtG