css - Bootstrap 响应式网格布局 : can't show rows of 3 div

Question

我正在使用 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):

* * *
*
* * *
*

有人能帮忙吗？

Answer 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 的信息和列换行。