<bootstrap div等高>
<div>在進行網頁布局時，經常會遇到需要將多個div等高排列的情況。這意味著無論它們的內容多少，它們的高度均保持一致。這樣做可以使整個頁面看起來更加統一，美觀。而使用bootstrap框架可以很方便地實現div等高的效果。</div>

以下是幾個案例詳細解釋說明如何使用bootstrap實現div等高：

1. 使用 display:flex 屬性：

<div class="d-flex align-items-stretch">
<div class="flex-fill">Div 1</div>
<div class="flex-fill">Div 2</div>
<div class="flex-fill">Div 3</div>
</div>

在這個案例中，我們將外層的div設為 display:flex ，并添加 align-items-stretch 屬性。這樣，內部的div會自動等分高度，并保持等高排列。

2. 使用 row 和 flexbox 柵格系統：

<div class="container">
<div class="row">
<div class="col-4 d-flex flex-column">
<div class="flex-fill">Div 1</div>
<div class="flex-fill">Div 2</div>
</div>
<div class="col-8">
<div class="flex-fill">Div 3</div>
</div>
</div>
</div>

在這個案例中，我們使用了 bootstrap 的柵格系統。將外層的div設為 row ，內部的div使用 col-4 和 col-8 分別占據不同的寬度。然后，在 col-4 的div中添加 d-flex 和 flex-column 屬性，使內部的div垂直排列。這樣，內部的div會自動等高，并與 col-8 的div保持等高排列。

3. 使用 display:table 和 display:table-row 屬性：

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;width:33%">Div 1</div>
<div style="display:table-cell;width:33%">Div 2</div>
<div style="display:table-cell;width:33%">Div 3</div>
</div>
</div>

在這個案例中，我們使用了 display:table 和 display:table-row 屬性。將外層的div設為 display:table ，用于模擬表格布局。然后，在內部的div中使用 display:table-cell 設置寬度，并保持等高排列。

總之，bootstrap提供了多種方法來實現div等高效果。以上這些示例只是其中的幾個，根據具體情況，可以選擇適合的方法來實現網頁布局的要求。無論是使用 display:flex 屬性、row 和 flexbox 柵格系統，還是 display:table 和 display:table-row 屬性，都能夠方便地實現div等高效果，使整個頁面呈現更好的視覺效果。