<font size=4>

Bootstrap是一個流行的前端開發框架，它提供了一系列的CSS和JavaScript組件，用于快速構建現代化的網頁界面。在Bootstrap中，我們可以使用并列的div來創建多列布局，使網頁呈現更豐富多樣的內容展示。下面我們將通過幾個案例來詳細解釋并列的div在Bootstrap中的使用方法。

</font>
<font size=4>

案例一：創建兩列布局

</font>

<code><font size=3><div class="container">
<div class="row">
<div class="col-md-6">
<p>這是左側內容。</p>
</div>
<div class="col-md-6">
<p>這是右側內容。</p>
</div>
</div>
</div></font></code>

<font size=4>

在這個案例中，我們使用了一個容器（container）包裹了兩個并列的div（col-md-6）。col-md-6的意思是在中等屏幕尺寸下，每個div占據其父元素（row）的一半寬度。因此，左側內容和右側內容將以平分的寬度在網頁中展示。

</font>
<font size=4>

案例二：創建三列布局

</font>

<code><font size=3><div class="container">
<div class="row">
<div class="col-md-4">
<p>這是左側內容。</p>
</div>
<div class="col-md-4">
<p>這是中間內容。</p>
</div>
<div class="col-md-4">
<p>這是右側內容。</p>
</div>
</div>
</div></font></code>

<font size=4>

在這個案例中，我們同樣使用了一個容器（container）包裹了三個并列的div（col-md-4）。col-md-4的意思是在中等屏幕尺寸下，每個div占據其父元素（row）的三分之一寬度。因此，左側內容、中間內容和右側內容將平均展示在網頁中。

</font>
<font size=4>

案例三：嵌套并列的div

</font>

<code><font size=3><div class="container">
<div class="row">
<div class="col-md-6">
<p>這是左側內容。</p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<p>這是右上側內容。</p>
</div>
<div class="col-md-6">
<p>這是右下側內容。</p>
</div>
</div>
</div>
</div>
</div></font></code>

<font size=4>

這個案例演示了如何在一個并列的div中嵌套另一個并列的div。右側內容被分為兩列，并且每列的寬度占據了父元素（col-md-6）的一半。通過這種方式，我們可以創建出更為復雜的布局，將內容精確地放置在所需的位置上。

</font>
<font size=4>

通過以上的案例，我們詳細解釋了在Bootstrap中如何使用并列的div來創建多列布局。無論是兩列還是三列，甚至更多列的布局，都可以通過使用Bootstrap提供的網格系統和并列的div來輕松實現。這為前端開發者提供了快速構建現代化網頁界面的便利性。

</font>