如何用Twitter Bootstrap 3"包装"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)

注意

如果您不喜欢它们的排序方式,您可以使用orderfrom flexbox来更改它们的顺序.

所以这里有一个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>

`