高度問題
在我們的“ 天真例子 ”中，我們所有的單元格都是相同的高度。瀏覽器心甘情願地在我們想要的地方打破了這條線，所有人似乎對這個世界都是正確的。直到高度進入畫面。
讓我們看一下前面的例子並給出一些單元格的高度，也許就像你在 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 更好的名字。