Bootstrap "our services" 在中等屏幕尺寸上阻止跳线

Question

这个问题应该很简单，气死我了。 Bootstrap 部分工作得很好，除了这个中等屏幕布局，其中一个跳到下一行...有什么建议吗？

Here is the culprit in action

在屏幕截图中，左侧div 的大小为485x200px，右侧div 均为485x174px。显然，如果需要，我可以提供代码。只是不知道这是否是一个简单修复的常见问题。

谢谢！！！

Here is the code in question on Codeply

Viewport width <1200px 看问题

Answer 1

这是正常行为，我假设您的代码与此类似：

<div class="row">
    <div class="col-xs-12 col-md-6">
    </div>
    <div class="col-xs-12 col-md-6">
    </div>
    <div class="col-xs-12 col-md-6">
    </div>
    <div class="col-xs-12 col-md-6">
    </div>
</div>

将其分成两行，您应该会得到想要的结果：

<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12 col-lg-6">
            </div>
            <div class="col-xs-12 col-lg-6">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12 col-lg-6">
            </div>
            <div class="col-xs-12 col-lg-6">
            </div>
        </div>
    </div>
</div>

为什么会这样？ Bootstraps 列 float: left;。您的第一个块高于第二个块，因此您的浏览器尝试用第三个块填充剩余的 space。

---

旁注： 使用列时，请始终添加 col-xs-12 除非 xs 具有不同的值。 （这可以防止奇怪的浮动行为）