Question

我有一个案例，我希望我的引导列水平居中。

为实现这一目标，我使用了以下规则

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）， not 覆盖Bootstrap网格。

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

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

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

请删除：

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/

水平居中的Bootstrap列

3 个答案: