html - Bootstrap HTML 回车

Question

隔离问题一小时后，我可以发布这个:)

我的本​​地文件有问题，但在生产环境中没有。唯一的区别是在生产环境中，html 文件是内联的。

我正在使用默认的 bootstrap 3.3.5 和这个 css 类:

<style>
    .v-center {
        display: inline-block;
        float: none;
    }
</style>

我的问题是两个代码的结果不一样:

代码 1:

<div class="row">
    <div class="col-md-4 v-center">
        col-md-4
    </div><div class="col-md-8 v-center">
        col-md-8
    </div>
</div>

代码 2:

<div class="row">
    <div class="col-md-4 v-center">
        col-md-4
    </div>
    <div class="col-md-8 v-center">
        col-md-8
    </div>
</div>

你可以在这里找到两个例子:

http://relationeo.com/test.html

http://relationeo.com/test2.html

当窗口 > 990px​​ 时会发生错误。

为什么回车会打断列？

谢谢

Answer 1

问题是您的 CSS 类“v-center”。它将显示设置为 inline-block。随着 inline-block 空白开始发挥作用(无论如何至少是空白的第一个字符)。正如您所期望的那样:

Just
Testing

要呈现为 Just Testing 而不是 JustTesting，这同样适用于内联或内联 block 元素。

总而言之，如果您希望获得一致的结果，请不要弄乱 Bootstrap 网格。如果您需要应用其他类，请在网格 div 中进行，而不是在同一个 div 中。例如:

<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
    <div class="v-center">
        ...
    </div>
</div>