水平居中的 Bootstrap 列

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

您应该为这种情况创建一个特殊的类（即：row-centered），并且不覆盖 Bootstrap 网格。

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

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

Answer 2

请删除：

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

你可以添加到 .row 类：

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

如果您使用的是 bootstrap v4，则添加了 flexbox 类，您可以使用： https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 3

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