水平居中引導列

Question

JSFIDDLE

我有，我想我的自舉列水平居中自己的情況。

要做到這一點，我已經使用了下列規則

CSS：

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

然後如果4列有他們應該來在一條線上。如果有3列，那麼他們應該居中。

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> 

它工作正常，如果我只有1,2或3列，但是當我拿到4列，其中一列下降到一個新的生產線。爲了解決這個問題，我試着減小寬度來說24.7%。但是，這再也不適用於所有屏幕。所以我必須不斷改變寬度。

我想知道爲什麼寬度25%沒有采取25%寬度和下降。以及如何解決這個問題，並讓他們始終處於中心位置。

JSFIDDLE

Answer 1

請刪除：

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

，你可以添加到.row類：

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

如果您使用引導V4也加入Flexbox的類，你可以使用： https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 2

給display: flex到row。使用這種方法將在所有屏幕上工作。

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

你應該創建一個特殊類：此情況下（即​​3210）和不覆蓋的引導電網。

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

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