我正在使用 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 的 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 的信息和列换行。
关于css - Bootstrap 响应式网格布局 : can't show rows of 3 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37341702/