Twitter Bootstrap 3在调整大小时减少行中的列数
Twitter Bootstrap 3在调整大小时减少行中的列数
提问于 2013-12-07 19:33:15
在不同设备上查看时，减少行中列数的最佳方法是什么？
我的页面在桌面上有3栏，但我想在平板电脑上减少到2栏。我的第三列应该怎么处理？
<div class="container">
<div class="row">
<!-- column one -->
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12>
<div>Content One</div>
</div>
<!-- column two -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12>
<div>Content Two</div>
</div>
<!-- column three -->
<div class="col-lg-3 col-md-3 col-sm-?? col-xs-12>
<div>Content Three</div>
</div>
</div>
</div>桌面
平板电脑
对于大型、中型和xs布局来说，它很好，但对于sm，它就不行了。我的布局应该是大中型的6 3 3和xsmall的12
对于小的，我想将3列(6-3-3)减少到2列(8-4)，但是我应该如何处理第三列
谢谢
一个
回答 2
Stack Overflow用户
发布于 2013-12-07 19:41:49
您可以将第3列换成下一行，并使其全宽。
<div class="container">
<div class="row">
<!-- column one -->
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
<div>Content One</div>
</div>
<!-- column two -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<div>Content Two</div>
</div>
<!-- column three -->
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div>Content Three</div>
</div>
</div>
</div>在Bootply上使用它：http://bootply.com/99087
另外，不要忘了用双引号结束类属性。
选项2..
另一种选择是应用一个特殊的类在small设备上向右拉出第3列：
/* pull-right on small devices */
@media (min-width: 992px) {
.pull-right-sm {
float: right;
}
}http://bootply.com/99089
选项3..
另一种选择是使用嵌套，如下所示：http://bootply.com/99100
Stack Overflow用户
发布于 2013-12-08 07:16:04
演示：http://jsbin.com/aRuwIFiN/1/edit
你会有一个剩余的列，因为3是一个奇数。
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-7">
<div>Content One</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-5">
<div>Content Two</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-7">
<div>Content Three</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-5">
<div>Content One</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-7">
<div>Content Two</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-5">
<div>Content Three</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-7">
<div>Content One</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-5">
<div>Content Two</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<div>Content Three</div>
</div>
</div>
</div> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20440853
复制相关文章
相似问题
腾讯云开发者
