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

对于小我想减少 3 列 (6-3-3) 到 2 列 (8-4) 但我应该如何处理第三列

谢谢

一个

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

另一种选择是应用一个特殊的类来在小型 设备上将第 3 列拉到右边:

/* pull-right on small devices */
@media (min-width: 992px) {
    .pull-right-sm {
        float: right;
    }
}

http://bootply.com/99089

选项 3..

另一种选择是使用嵌套，如下所示:http://bootply.com/99100