Bootstrap 3:在行上推/拉列

Question

我有像这样的手机布局:

 --------- 
|    1    |  
 --------- 
|    2    |  
 --------- 
|    3    |  
 --------- 

对于更大的屏幕,我想拥有它:

 -----------------------------------
|        1               |     3    |
 -----------------------------------
|                 2                 |
 -----------------------------------

代码,这不起作用,因为拉/推过一行:-(

<div class="row clearfix">
    <div class="col-sm-9 alert alert-info">
        1
    </div>
    <div class="col-sm-3  col-sm-push-3 alert alert-warning">
         2
    </div>
    <div class="col-sm-3 col-sm-pull-3 alert alert-debug">
         3
    </div>
</div>  

http://jsfiddle.net/QtPd2/27/

Answer 1

通过设置left或right属性推动和拉动工作,它将永远不会包装到另一行,如您所述.

解决方案是复制第2列或第3列的内容(采用内容或交互量最少的内容).隐藏一个xs和另一个sm,md和lg.

在下面的示例中,我重复了第2列.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-9 alert alert-info">
      1
    </div>
    <div class="col-xs-12 alert alert-warning hidden-sm hidden-md hidden-lg">
      2
    </div>
    <div class="col-xs-12 col-sm-3 alert alert-danger">
      3
    </div>
    <div class="col-sm-3 alert alert-warning hidden-xs">
      2
    </div>
  </div>
</div>

PS有没有必要添加.clearfix上.row,因为它已经包含了.即使你想一栏是12宽上最小的布局,随时添加一个.col-xs-12类,因为它增加了padding用于否定消极margin的.row.