Twitter Bootstrap 3在调整大小时减少行中的列数

Question

在不同设备上查看时，减少行中列数的最佳方法是什么。

我的页面在桌面上有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-?? col-xs-12>
  <div>Content Three</div>
 </div>

 </div>
 </div>

桌面

平板

对于大型，中型和xs布局，它很好，但它打破了sm。我的布局应该是 6 3 3适用于大中型和中型 12 for xsmall

对于小的我想将3列（6-3-3）减少到2列（8-4）但是我应该如何处理第3列

感谢

一

Answer 1

您可以将第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

Answer 2

DEMO：http://jsbin.com/aRuwIFiN/1/edit

你将有一个左栏，因为三是一个奇数。

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