Question

我在bootstrap中有一个基于col的列表。此列表在一行中分为3列，如下所示：

<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div>

我试图找出为什么最后一列居中。

我尝试了float: left和位置：选项，但没有成功。

*有趣的事实：当我将最后一个col更改为col-md-8时 - 它不是居中，而是向右侧推进。当我将其更改为col-md-9时，它就在下一行。它看起来像是不可见的col-md-4

Answer 1

查看css中是否发生覆盖，bootstrap cols应该可以正常工作

Answer 2

对不起所有Stackoverflow-朋友提出的不精确问题。在Bootstrap标记中，我是“特殊的东西”，未列出问题;）

.col-centered {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

此类中心引导程序列在一个旁边 - 但display: inline-block;有问题。请参阅示例this。所以为了防止这种情况，他们是几种方法我在div之间添加了一个空白的注释：

<div class="row">
    <div class="col-xs-6 col-centered">
        Sth
    </div><!--
    --><div class="col-xs-6 col-centered">
        Sth
    </div>
</div>

Bootstrap：代码中没有的空白列，但它在网格中

2 个答案: