Bootstrap＆＃34;我们的服务＆＃34;在中等屏幕尺寸上阻止跳线

Question

这个问题应该是如此简单，以至于令我感到愤怒。 Bootstrap部分工作得很好，除了这个中等屏幕布局，其中一个跳到下一行......有什么建议吗？

Here is the culprit in action

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

谢谢！

Here is the code in question on Codeply

视口宽度<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;。您的第一个块高于第二个块，因此您的浏览器会尝试使用第三个块填充剩余空间。

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