<div class="row">是HTML中常用的一個 class 屬性，用于創(chuàng)建網頁布局中的行。它是 Bootstrap 框架中的一個組件，用于將內容分成一行的多個列。
<div class="row"> 通常與 <div class="col"> 結合使用，<div class="col"> 是用來創(chuàng)建列的。每個 <div class="col"> 可以放置不同的內容，這些內容會在同一行中水平排列。這種行列的結構可以幫助我們以自適應的方式進行網頁布局。
下面我們通過幾個代碼案例來詳細解釋 <div class="row"> 的用法。
案例一：

<p><div class="container"></p>
<p>  <div class="row"></p>
<p>    <div class="col">Lorem ipsum dolor sit amet</div></p>
<p>    <div class="col">consectetur adipisicing elit.</div></p>
<p>  </div></p>
<p></div></p>

在這個案例中，我們在一個包裹內容的容器內創(chuàng)建了一個 <div class="row">。這個 row 包含了兩個 col。這兩個 col 的內容會在同一行中水平排列。
案例二：

<p><div class="container"></p>
<p>  <div class="row"></p>
<p>    <div class="col col-sm-6">Lorem ipsum dolor sit amet</div></p>
<p>    <div class="col col-sm-6">consectetur adipisicing elit.</div></p>
<p>  </div></p>
<p></div></p>

在這個案例中，我們給 col 添加了類 "col-sm-6"。這個類可以使 col 在小屏幕設備上呈現為兩列，而在大屏幕設備上呈現為一列。通過使用 Bootstrap 的響應式設計，我們可以根據不同設備的屏幕尺寸來調整布局。
案例三：

<p><div class="container"></p>
<p>  <div class="row"></p>
<p>    <div class="col col-lg-4">Lorem ipsum dolor sit amet</div></p>
<p>    <div class="col col-lg-4">consectetur adipisicing elit.</div></p>
<p>    <div class="col col-lg-4">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></p>
<p>  </div></p>
<p></div></p>

在這個案例中，我們給 col 添加了類 "col-lg-4"。這個類可以使 col 在大屏幕設備上呈現為三列。通過使用不同的類名，我們可以在不同屏幕尺寸下調整列的數量，以滿足不同的布局要求。
總之，<div class="row"> 是用于創(chuàng)建網頁布局中的行的重要組件之一。它可以和 <div class="col"> 結合使用，幫助我們實現自適應的網頁布局。通過使用不同的類名，我們可以在不同的屏幕尺寸下調整布局。這種靈活性使得我們可以輕松地創(chuàng)建響應式的網頁布局。