最佳答案
Bootstrap 4 的網格體系是構建呼應式網頁的關鍵組件之一。它供給了一種簡單而高效的方法來創建順應差別屏幕尺寸的規劃。本文將深刻探究 Bootstrap 4 網格體系的核心不雅點、利用方法跟實例，幫助妳輕鬆控制次序規劃的藝術。
一、基本不雅點
Bootstrap 4 的網格體系基於一個 12 列的規劃，這意味著全部頁面可能被分別為 12 個等寬的列。這些列可能經由過程差其余類來把持它們在各個屏幕尺寸下的表示。
1. 容器（Container）
容器是用於包裹網格體系的外層元素。它供給了內容的居中跟對齊，並為網格行跟列設置了內邊距。
<div class="container">
<!-- 行跟列內容 -->
</div>
2. 行（Row）
行是網格體系中的程度部分，用於包裹列。它必須放在容器外部。
<div class="row">
<!-- 列內容 -->
</div>
3. 列（Column）
列是網格體系中的基本構成部分。經由過程增加類 .col-*-* 到列中，可能把持列的寬度跟規劃。
<div class="col-md-6">
<!-- 列內容 -->
</div>
二、網格體系規矩
1. 列寬
列的寬度可能經由過程增加差其余類來實現。比方，.col-md-4 表示在中等及以上屏幕尺寸上，該列將佔用 4 個列寬。
2. 呼應式規劃
Bootstrap 4 的網格體系是呼應式的，這意味著列的寬度會根據屏幕尺寸主動調劑。可能經由過程增加差其余類前綴來把持在差別屏幕尺寸上的行動，如 .col-xs-*、.col-sm-*、.col-md-*、.col-lg-* 跟 .col-xl-*。
3. 偏移
偏移類，如 .mx-*，用於在程度偏向上向右挪動列。比方，.mx-auto 會將列居中對齊。
4. 嵌套
列可能嵌套在其他列外部，以創建複雜的規劃。
<div class="row">
<div class="col-md-8">
<!-- 第一列內容 -->
</div>
<div class="col-md-4">
<!-- 嵌套列內容 -->
</div>
</div>
三、實例
以下是一個簡單的 Bootstrap 4 網格規劃實例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 網格規劃實例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>標題 1</h2>
<p>這是第一列的內容。</p>
</div>
<div class="col-md-6">
<h2>標題 2</h2>
<p>這是第二列的內容。</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在這個實例中，我們創建了一個包含兩列的規劃，其中第一列佔用了 6 個列寬，第二列佔用了剩下的 6 個列寬。
四、總結
Bootstrap 4 的網格體系為開辟者供給了一種簡單而富強的方法來創建呼應式規劃。經由過程懂得基本不雅點、規矩跟實例，妳可能輕鬆地控制次序規劃的藝術，並創建出順應各種設備的網頁規劃。