Bootstrap Push/Pull 问题

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 只是左右移动元素，而不是按照我的想法加入他们（即使我将列数弄乱到 push/pull）。谁能指出我正确的方向？

Answer 1

这可能会变得非常混乱...如果您要在不同的屏幕上重新排序结构，只需为 phone 屏幕制作一个单独的 div。在 Bootstrap 3 中使用隐藏的（屏幕大小）。 bootstrap 推拉可以水平但不能垂直调整（据我所知）。希望下面是正确的。我现在一直在使用其他东西，已经有一段时间了。

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

Answer 2

如前所述，目前，仅使用 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>

Answer 3

我使用隐藏和可见而不是使用推拉。希望下面的代码对您有所帮助。

<div class="row">
    <div class="col-xs-12 col-md-6 a">Search</div>
    <div class="col-xs-12 col-md-6 visible-md visible-lg c">Preferences</div>
    <div class="col-xs-12 b">Directory</div>
    <div class="col-xs-12 hidden-md hidden-lg c">Preferences</div>
  </div>

Bootstrap Push/Pull 问题

Bootstrap Push/Pull Issues

html

css

twitter-bootstrap