Question

对于＆＃34; sm＆＃34;更小我希望div显示为：

        fixed_Todesdatum
   1          <NA>
   2          <NA>
   3       2004-09-16
   4          <NA>
   5       2006-04-20
   6          <NA>
   7          <NA>
   8          <NA>
   9          <NA>
   10         <NA>

对于＆＃34; md＆＃34;更大我希望div显示为：

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

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

这是否可以使用Bootstrap？

我意识到我能做到：

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

...但这并不能确保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) 1}}

或

使用

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

具有视觉效果（即 - 使用border时）

注意

如果您不喜欢它们的排序方式，可以使用order中的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>

`

Answer 2

你实际上做对了。

<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的高度相同，以便它们相应排列。

我该如何包装＆＃34;使用Twitter Bootstrap 3进行div？

2 个答案:

但是

或

注意