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

首先，删除您的推送和拉取类并将您的列包装在一个 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>