Bootstrap推/拉问题

Question

我对Bootstrap很新,并且在使用push和更改元素的对齐方面存在问题pull.这是小屏幕尺寸(xs及以上)的理想结果:

-------------------
|     Search      |
-------------------
|    Directory    |
-------------------
|   Preferences   |
-------------------

然后对于所有大小md及以上的屏幕,我想要这个布局:

-------------------
|  Search  | Pref.|
-------------------
|    Directory    |
-------------------

我已经读过Bootstrap布局应该是移动优先设计的,所以我的代码如下:

.a {
  background-color: green;
}
.b {
  background-color: blue;
}
.c {
  background-color: red;
}

<link href="http://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-md-7 a">Search</div>
    <div class="col-xs-12 b col-md-push-12">Directory</div>
    <div class="col-xs-12 col-md-5 c col-md-pull-7">Preferences</div>
  </div>
</div>

这是我的代码的Bootply.它的工作方式与小屏幕一样,每个都div以正确的顺序堆叠,但我无法弄清楚原因push,pull只是左右移动元素,没有像我想的那样加入它们(即使我弄乱了数字)列推/拉).谁能指出我正确的方向？

Answer 1

正如前面提到的那样,只使用bootstrap类就无法做到这一点.push,pull并且offset只会水平移动元素,而不是垂直移动元素.

但是,如果您的目标是支持它的浏览器,则可以使用flexbox和媒体查询的组合来实现此重新排序,而无需复制内容.

支持细分:http://caniuse.com/#feat=flexbox

首先,删除push和pull类并将列包装在div中.

<div class="container">
  <div class="row">
    <div class="flexBox">
      <div class="a col-xs-12 col-md-7">Search</div>
      <div class="b col-xs-12 ">Directory</div>
      <div class="c col-xs-12 col-md-5">Preferences</div>
    </div>
  </div>
</div>

其次,使用一些CSS规则来设置包装器div的显示.

.flexBox
{
    display:flex;
    flex-wrap:wrap;
}

最后,设置一个媒体查询,一旦宽度高于xs断点(768px),它将重新排序元素

@media all and ( min-width: 768px ) {
    .flexBox .a { order:1; }
    .flexBox .b { order:3; }
    .flexBox .c { order:2; }
}

完整的例子如下.

.a { background-color:green; }
.b { background-color:blue; }
.c { background-color:red; }

.flexBox {
  display:flex;
  flex-wrap:wrap;
}

@media all and ( min-width: 768px ) {
  .flexBox .a { order:1; }
  .flexBox .b { order:3; }
  .flexBox .c { order:2; }
}

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

<div class="container">
  <div class="row">
    <div class="flexBox">
      <div class="a col-xs-12 col-md-7">Search</div>
      <div class="b col-xs-12 ">Directory</div>
      <div class="c col-xs-12 col-md-5">Preferences</div>
    </div>
  </div>
</div>