Bootstrap 响应式网格布局：无法显示 3 个 div 的行答案

【问题标题】：Bootstrap Responsive Grid layout: can't show rows of 3 divBootstrap 响应式网格布局：无法显示 3 个 div 的行
【发布时间】：2016-09-17 10:11:28
【问题描述】：

我正在使用 Bootstrap 3 响应式网格，但我的布局有问题。

这是我今天的 HTML 结构：

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

这适用于“移动”（col-xs-6）和“桌面”（cold-md-3），但在“平板电脑”（col-sm-4）上，它看起来像这样（*作为一个div）：

* * *
*
* * *
*

谁能帮忙？

【问题讨论】：

Bootstrap 使用 12 列网格，但您试图将 16 列合并到您的布局中。这就是为什么您看到第四列被推到前三个 col-sm-4 之下的原因。

标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design grid

【解决方案1】：

我认为你想利用 Bootstrap 的 column wrapping 功能..

演示：http://codeply.com/go/TrLJF1qIlC

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

阅读更多关于 the Bootstrap grid 和列换行的信息。

【讨论】：

太好了，它工作得很好，事实上我的错误是把 .row div 都放在这里...谢谢！！

【解决方案2】：

你应该使用 col-sm-3 而不是 col-sm-4

在这里演示：https://jsfiddle.net/IA7medd/6bzf4ze7/

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

【讨论】：