html - 奇怪的 Bootstrap 响应问题

Question

我第一次使用 Bootstrap 页面设计时遇到了一个奇怪的问题。

在中 View 中，我有三行四列。我将它们折叠成两列行使用 (<)div class="col-sm-6 col-md-3"(>)。

第一行和第三行一切正常。但是第二行没有正确折叠。这些列是歪斜的，没有正确地并排对齐。

这发生在两个页面上。只有中间一行受到影响。

任何想法都会有所帮助。

更新:

感谢 fiddle 、讨论和 DUH 时刻!他们非常需要。

我使用的原始格式是:

 <div class="row">
     <div class="col-sm-6 col-md-3">1</div>
     <div class="col-sm-6 col-md-3">2</div>
     <div class="col-sm-6 col-md-3">3</div>
     <div class="col-sm-6 col-md-3">4</div>
 </div>

JSFiddle

Answer 1

根据我的评论，您可以使用 Bootstrap helper classes解决你的问题。如果没有看到您的实现，很难说这是否是最好的主意，因为您应该明智地使用这些帮助程序类。鉴于此，您可以将列分割分成单独的 div。下面的代码和 fiddle :

<div class="container visible-md visible-lg">
    <div class="row">
        <div class="col-md-3">Col 1</div>
        <div class="col-md-3">Col 1</div>
        <div class="col-md-3">Col 1</div>
        <div class="col-md-3">Col 1</div>
    </div>
</div>
<div class="container visible-xs visible-sm">
    <div class="row">
        <div class="col-sm-6">Col 1</div>
        <div class="col-sm-6">Col 2</div>
    </div>
    <div class="row">
        <div class="col-sm-6">Col 3</div>
        <div class="col-sm-6">Col 4</div>
    </div>
</div>

JSFiddle here