html – Bootstrap 3：在行上推/拉列

发布时间：2020-12-14 18:38:56 所属栏目：资源来源：网络整理

导读：我有像这样的手机布局： --------- | 1 | --------- | 2 | --------- | 3 | --------- 对于更大的屏幕,我想拥有它： -----------------------------------| 1 | 3 | -----------------------------------| 2 | ----------------------------------- 代码,这

我有像这样的手机布局：

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

解决方法

通过设置左侧或右侧属性来推动和拉动工作,它将永远不会包裹到另一行,如您所述.

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

在下面的示例中,我重复了第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>

附：没有必要在.row上添加.clearfix,因为它已经包含了.rowfix.即使你希望在最小的布局上有一个12宽的列,也总是添加一个.col-xs-12类,因为它添加了用于否定.row上的负边距的填充.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!