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>

这适用于＆＃34; mobile＆＃34; （col-xs-6）和＆＃34;桌面＆＃34; （cold-md-3）但是平板电脑＆＃34; （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和专栏封装。

Answer 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>

Bootstrap响应网格布局：不能显示3 div的行

2 个答案: