水平居中引导列

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