高度问题
在我们的“ 天真例子 ”中，我们所有的单元格都是相同的高度。浏览器心甘情愿地在我们想要的地方打破了这条线，所有人似乎对这个世界都是正确的。直到高度进入画面。
让我们看一下前面的例子并给出一些单元格的高度，也许就像你在 dashoard 类型的页面上看到的那样。
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">1</div>
<div class="col-xs-6 col-md-3 cell-tall">2</div>
<div class="col-xs-6 col-md-3 cell-tall">3</div>
<div class="col-xs-6 col-md-3">4</div>
<div class="col-xs-6 col-md-3">5</div>
<div class="col-xs-6 col-md-3 cell-med">6</div>
<div class="col-xs-6 col-md-3">7</div>
<div class="col-xs-6 col-md-3">8</div>
<div class="col-xs-6 col-md-3 cell-med">9</div>
<div class="col-xs-6 col-md-3 cell-med">10</div>
<div class="col-xs-6 col-md-3">11</div>
</div>
</div>
这里我们添加了一些我们在上面定义的 cell-tall 和 cell-med CSS。这将具有改变一些单元格的高度的效果。我想知道它会是什么样子……
在这里，他们又是中小屏幕尺寸： 
哦，我真是一团糟。我认为这不是我们想要的。在中等大小的情况下，5 和 6 是不合适的，不知何故 7 最终开始新的一行。在小尺寸，我们有两个单元中的第一排， 4 第二行中，有 4 个，5 个和 6 都在两个屏幕尺寸右边叠起来！
那么，我们如何解决这个问题呢？
Clearfix to Rescue
当然，帮助这种情况的一种方法是使用多个 row：
<div class="container-fluid">
<div class="row">
<!-- cols -->
</div>
<div class="row">
<!-- cols -->
</div>
</div>
这通常是新 Bootstrappers 尝试的第一件事。这似乎是有道理的：“我想要每行四个单元格，所以我只为每个 4 col div 创建一个新的 row”。
但这种推理方式存在问题：Bootstrap 3 和即将推出的版本 4 的重点是响应。通过将“四个 col 放在一个 row”中，你并不是真的反应性地思考。
在 clearfix CSS 类的一个很好的理解将有助于你开始看到多种 row 的 div 已被真正左右着你的回应是被设计的方式理解意思的工作。简而言之，你根本无法知道有多少 col 放入了一个 row - 浏览器还没有渲染你的作品！
请记住，在第一件事情中，我们说你需要在“倒数 12”中思考？不用多说了，让我们在这里解决我们的问题，在代码中使用注释来希望清除任何混淆。是的，它看起来像更多的代码，但大多数额外的是评论。
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">1</div>
<div class="col-xs-6 col-md-3 cell-tall">2</div>
<!--
We have rendered TWO cells.
On small and extra small devices, the viewport will render TWO cells
(12 / 6 = 2), so we need a clearfix every TWO cells. We also need to
say "don't show this clearfix when the viewport will render FOUR cells",
which it will do at medium size and up (12 / 3 = 4). We do that by adding
hidden-md and hidden-lg to our clearfix div, in effect instructing the
browser to not show it at all on a wider screen.
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3 cell-tall">3</div>
<div class="col-xs-6 col-md-3">4</div>
<!--
We have now rendered FOUR cells.
We are never going to have more than FOUR cells side by side. So every
FOURTH cell, we place a clearfix that will ALWAYS show. We do this by
just leaving off any of the hidden-* classes.
-->
<div class="clearfix"></div>
<!---->
<div class="col-xs-6 col-md-3">5</div>
<div class="col-xs-6 col-md-3 cell-med">6</div>
<!--
We have now rendered SIX cells.
After the sixth cell, we are at a multiple of TWO, but not FOUR so we
repeat the clearfix that we used after cell TWO.
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3">7</div>
<div class="col-xs-6 col-md-3">8</div>
<!--
Now we have rendered EIGHT cells, which is a multiple of TWO AND FOUR,
so we put in a clearfix that's always visible.
-->
<div class="clearfix"></div>
<!---->
<div class="col-xs-6 col-md-3 cell-med">9</div>
<div class="col-xs-6 col-md-3 cell-med">10</div>
<!--
After the 10th cell, once again a multiple of TWO but not FOUR...
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3">11</div>
</div>
</div>
clearfix 是一个 CSS 类，它渲染一个微小的（几乎看不见的）div，其目的是清除col divs 使用的 left 浮点数。
天才真的在 hidden-sm，hidden-md 等类。这些类放在 clearfix div 上，而不是 col div！ 这会导致 clearfix div 在某些视口宽度处从渲染流中神奇地出现或消失！ 天才！
Bootstrap 在版本 3 中有一个令人困惑的 hidden-*和 visible-*类数组，不幸的是它们实际上并不是彼此的逆。因此，我发现在 clearfixes 上总是使用 hidden-*类是最清晰和最安全的。
看起来它可能会在 Bootstrap 4 中变得更好，像 hidden-*-up 和 hidden-*-down 这样的类（他们完全摆脱了 visible-*类）。
足够好的措辞，现在看起来像什么？ 
这就是我们想要的！ 在大屏幕中，我们总是有四个，在较小的屏幕上，总是两个跨越。不再在奇怪的地方堆叠，而且差距是我们期望它们的地方。
仪表板
那些彩色圆形的东西已经足够了，让我们把更多有趣的东西放在那些 div 中。让我们采用相同的一组列并制作一个真正的仪表板。使用以下 CSS：
<head>
<title></title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
padding-top: 15px;
}
.panel-tall .panel-body {
height: 175px;
}
.panel-med .panel-body {
height: 100px;
}
.panel-short .panel-body {
height: 70px;
}
</style>
</head>
这是仪表板代码：
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="panel panel-default panel-med">
<div class="panel-heading">
Heading 1
</div>
<div class="panel-body">
Body 1
</div>
<div class="panel-footer">
Footer 1
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 cell-tall">
<div class="panel panel-danger panel-tall">
<div class="panel-heading">
Heading 2
</div>
<div class="panel-body">
Body 2. Look out, this needs some attention!
</div>
<div class="panel-footer">
Footer 2
</div>
</div>
</div>
<!--
On small and extra small devices, the viewport will render TWO cells
(12 / 6 = 2), so we need a clearfix every TWO cells. We also need to
say "don't show this clearfix when the viewport will render FOUR cells",
which it will do at medium size and up (12 / 3 = 4). We do that by adding
hidden-md and hidden-lg to our clearfix div, in effect instructing the
browser to not show it at all on a wider screen.
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3 cell-tall">
<div class="panel panel-success panel-short">
<div class="panel-heading">
Heading 3
</div>
<div class="panel-body">
Body 3. The file has successfully uploaded.
</div>
<div class="panel-footer">
Footer 3
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-default panel-tall">
<div class="panel-heading">
Heading 4 Chart
</div>
<div class="panel-body">
Body 4. Is this a cool graph or what?
</div>
<div class="panel-footer">
Footer 4
</div>
</div>
</div>
<!--
We are never going to have more than FOUR cells. So every FOURTH cell,
we place a clearfix that will ALWAYS show. We do this by just leaving off
any of the hidden-* classes.
-->
<div class="clearfix"></div>
<!---->
<div class="col-xs-6 col-md-3">
<div class="panel panel-warning panel-short">
<div class="panel-heading">
Heading 5
</div>
<div class="panel-body">
Body 5.
</div>
<div class="panel-footer">
Footer 5
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 cell-med">
<div class="panel panel-warning panel-tall">
<div class="panel-heading">
Heading 6
</div>
<div class="panel-body">
Body 6.
</div>
</div>
</div>
<!--
After the sixth cell, we are at a multiple of TWO, but not FOUR so we
repeat the clearfix that we used after cell TWO.
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3">
<div class="panel panel-info panel-tall">
<div class="panel-heading">
Heading 7
</div>
<div class="panel-body">
Body 7.
</div>
<div class="panel-footer">
Footer 7
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-info panel-med">
<div class="panel-heading">
Heading 8
</div>
<div class="panel-body">
Body 8.
</div>
<div class="panel-footer">
Footer 8
</div>
</div>
</div>
<!--
Now we have rendered EIGHT cells, which is a multiple of TWO AND FOUR,
so we put in a clearfix that's always visible.
-->
<div class="clearfix"></div>
<!---->
<div class="col-xs-6 col-md-3 cell-med">
<div class="panel panel-info panel-short">
<div class="panel-heading">
Heading 9
</div>
<div class="panel-body">
Body 9.
</div>
<div class="panel-footer">
Footer 9
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 cell-med">
<div class="panel panel-info panel-tall">
<div class="panel-heading">
Heading 10
</div>
<div class="panel-body">
Body 10.
</div>
<div class="panel-footer">
Footer 10
</div>
</div>
</div>
<!--
After the 10th cell, once again a multiple of TWO but not FOUR...
-->
<div class="clearfix hidden-md hidden-lg"></div>
<!---->
<div class="col-xs-6 col-md-3">
<div class="panel panel-info panel-tall">
<div class="panel-heading">
Heading 11
</div>
<div class="panel-body">
Body 11.
</div>
<div class="panel-footer">
Footer 11
</div>
</div>
</div>
</div>
</div>
该代码看起来像这样： 
在较小的视口中这样：
顺便说一句，我正在使用 Bootstrap 3 panel 类，它将在 Bootstrap 4 中消失，并被更具描述性和特定性的 tihuan 26 取代。看看这些图像，你就可以看出为什么 card 会比模糊的 panel 更好的名字。