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>

Answer 2

如果你在不同的屏幕上重新排序结构，那么这可能会变得非常混乱......只需为手机屏幕创建一个单独的div。在Bootstrap 3中使用hidden-（屏幕大小）。引导推拉是水平工作但不是垂直重新对齐（我知道）。希望这在下面是正确的。我现在一直在使用其他东西，这已经有一段时间了。

<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 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推/拉问题

3 个答案: