html - 我如何使用 Twitter Bootstrap 3 "wrap"div？

Question

对于“sm”和更小的，我希望 div 显示为:

[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]

对于“md”和更大的，我希望 div 显示为:

[ A ] [ D ]
[ B ] [ E ]
[ C ] [ F ]

其中 A 与 D 对齐，B 与 E 对齐，C 与 F 对齐，等等。

这可以用 Bootstrap 实现吗？

我意识到我可以做到:

<div class="col-md-6">
  <div id="A"></div>
  <div id="B"></div>
  <div id="C"></div>
</div>
<div class="col-md-6">
  <div id="D"></div>
  <div id="E"></div>
  <div id="F"></div>
</div>

...但这并不能确保 B 与 E 对齐，例如当 A 比 D 高时。

Answer 1

只需将 col-xs-12(这将适用于超小型和小型设备)添加到当前 col-md-6

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="A">a</div>
      <div id="B">b</div>
      <div id="C">c</div>
    </div>
    <div class="col-xs-12 col-md-6">
      <div id="D">d</div>
      <div id="E">e</div>
      <div id="F">f</div>
    </div>
  </div>
</div>

但是

如果你想让它们按高度对齐(又名等高)，那么你需要让它们在同一个父级中，否则你不能 AFAIK，并在每个处使用 clear:left奇数或 (2n+1)

或者

使用

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

具有视觉效果(即 - 当使用 border 时)

注意事项

如果您不喜欢它们的排序方式，您可以使用 flexbox 中的 order 来更改它们的顺序。

所以这是一个已经包含 order 的示例(以及一个仅包含 clear:left 的简单版本)

/*visual effect demo*/

.row > div {
  border: 1px solid black;
}
/* EX1- full example */

@media (min-width: 992px) {
  .ex1 .row {
    display: flex;
    flex-wrap: wrap;
  }
  .ex1 #B {
    order: 3
  }
  .ex1 #C {
    order: 5
  }
  .ex1 #D {
    order: 2
  }
  .ex1 #E {
    order: 4
  }
  .ex1 #F {
    order: 6
  }
}
/* EX2 - just to heave the same height without same height in visual effects*/

.ex2 .row > div:nth-of-type(2n+1) {
  clear: left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ex1">
  <div class="row">
    <div id="A" class="col-xs-12 col-md-6">a</div>
    <div id="B" class="col-xs-12 col-md-6">b</div>
    <div id="C" class="col-xs-12 col-md-6">c</div>
    <div id="D" class="col-xs-12 col-md-6">ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd</div>
    <div id="E" class="col-xs-12 col-md-6">e</div>
    <div id="F" class="col-xs-12 col-md-6">f</div>
  </div>
</div>
<hr />
<div class="container ex2">
  <div class="row">
    <div id="A" class="col-xs-12 col-md-6">a</div>
    <div id="B" class="col-xs-12 col-md-6">b</div>
    <div id="C" class="col-xs-12 col-md-6">c</div>
    <div id="D" class="col-xs-12 col-md-6">ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddd</div>
    <div id="E" class="col-xs-12 col-md-6">e</div>
    <div id="F" class="col-xs-12 col-md-6">f</div>
  </div>
</div>

`