Question

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

我有三行，中间视图各有四列。我将它们折叠成两列使用（＆lt;）div class =＆＃34; col-sm-6 col-md-3＆＃34;（＆gt;）。

第一排和第三排都很好。但第二行没有正确折叠。这些列是歪斜的，并没有正确地并排拼接成一排。

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

任何想法都会有所帮助。

更新：

感谢小提琴，讨论和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。代码和小提琴：

<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

怪异的Bootstrap响应问题

1 个答案: