當我們在使用 Bootstrap 進行網頁排版時，經常會遇到這樣的情況：同一 row 中的兩個（或多個）col 元素包含的子元素高度不同，這經常會造成我們在排版上的一些困擾。比如下面這個情形：
例子：左右兩邊的段落高度不一致
假設我們有一個 .row 容器，其中包含兩個不同寬度的列：.col-md-4 和 .col-md-8。每一列中都有一個 <p> 標籤，但由於內容長度不同，這導致它們的高度也不同(比如下圖中的灰色框範圍)，結果左右兩側的按鈕就變得一高一低的。
在 html 當中就像是這樣：
<div class="row">
<div class="col-md-4">
<p>123<br>123</p>
<button>Submit</button>
</div>
<div class="col-md-8">
<p>123</p>
<button>Submit</button>
</div>
</div>
像這樣段落長度不一致導致影響介面美觀的現象，除了<p>之外也會出現在其他任何可能造成左右高度不一致的元素類型(像是圖片、標題、輸入框、下拉選單等等)，經常造成排版破洞、後面的元素無法對齊等煩人的情況。
解決方式
要解決這個問題，我們可以利用 Bootstrap 當中的 class="row"來重新調整階層跟分組來解決，或是使用 JavaScript 來動態地調整高度。
解法1：利用 class="row" 來重新調整 html 的結構
如果只是想要單純地將上下元素分開對齊，我們能夠利用 Bootstrap 不同組 class="row" 之間各自獨立撐開屬於自己容器高度的特性，將這個例子當中的段落強制獨立在另一組 row class 裡面。像這樣：
<!-- 第一組 row class 放置文字段落 -->
<div class="row">
<div class="col-md-4">
<p>123<br>123</p>
</div>
<div class="col-md-8">
<p>123</p>
</div>
</div>
<!-- 第二組 row class 放置文字段落下方的元素，比如 button 等 -->
<div class="row">
<div class="col-md-4">
<button>Submit</button>
</div>
<div class="col-md-8">
<button>Submit</button>
</div>
</div>
雖然依舊沒有辦法使左右兩個文字段落高度相等，但這樣做的好處是只要單純從 html 將排版的方式換掉，就能使左右按鈕的高度對齊。
但要是畫面中的 「Submit 按鈕」就是需要跟上面的文字段落放在同一組 row 當中的話，該怎麼辦呢？
解法2：使用 JavaScript 來動態地調整高度
如果要在不更動既有 html 結構的前提下，使得左右兩個 Submit 按鈕位置對其的話，就需要用到 JavaScript 來動態調整高度了。比如在這個例子裏面左邊的文字段落高度較大，那我們就可以設法讀取左側的高度後，再把這個值套進去右側的文字段落裡面，這樣兩側就能等高了：
首先為了方便辨識，我們需要先將左右兩個段落分別加上不同的id (姑且就先命名為 left 和 right 吧)：
<div class="row">
<div class="col-md-4">
<p id="left">123<br>123</p>
<button>Submit</button>
</div>
<div class="col-md-8">
<p id="right">123</p>
<button>Submit</button>
</div>
</div>
接下來使用以下 JavaScript：
// 首先，獲取左側元素（id 為 "left"）的目前高度，命名為 left_height (對了，這裡使用offsetHeight來取高度值，也可以依照需求改成clientHeight)
var left_height = + document.getElementById("left").offsetHeight+"px";
// 接下來，將 left_height 的高度值，指定給右側元素（id 為 "right"）
document.getElementById("right").style.height=left_height;
這個方法的優點是只需要兩行 js 程式碼，就能夠快速解決高度不一致的問題。但它也有缺點，例如當瀏覽器窗口大小改變時 (比如使用者拖動視窗尺寸、需要處理的元素還有 display 等屬性需要切換...等情況)，就需要再次執行 JavaScript 來更新高度。
實際效果： https://codepen.io/bonniejhou/pen/VwgqmJw
其他解決思路
此外，如果你不喜歡使用 JavaScript 或者尋求其他更方便的解決方式的話，CSS Flexbox 或 Grid 也是可以考慮的選項之一。不過如果網頁的整體佈局已經使用 Bootstrap 當作基礎的話，就要另外考慮相容性等問題了。無論選擇哪種方法，試做過後都需要在不同裝置和螢幕尺寸上測試過才行，以免無意間衍伸出新的排版問題哦。
