Bootstrap 堆叠/水平网格

Bootstrap 网格系统 - 堆叠转为水平排列

Bootstrap 网格系统示例：堆叠转为水平排列

我们将创建一个常见的网格布局，在超小设备（如手机）上列会垂直堆叠，而在小设备（平板电脑）及更大尺寸的设备上则会水平排列。

以下示例展示了一个简单的两列布局，每列都使用了 .col-sm-6 类。这意味着在小屏幕及更大尺寸的设备上，每列将占据 12 个可用网格单元中的 6 个，而在超小屏幕上则会堆叠显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stacked-to-Horizontal Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <h1>Hello World!</h1>
    <div class="row">
      <div class="col-sm-6 p-3 bg-primary-subtle text-primary-emphasis">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-sm-6 p-3 bg-secondary-subtle text-secondary-emphasis">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

	提示：.col-sm-* 中的数字（例如 .col-sm-6 中的 6）表示该 div 在一行中，从 ‘sm’ 断点 (breakpoint) 开始及其以上尺寸的设备上，应该跨越 12 个可用网格单元中的多少个。请确保同一行中所有列的数字之和为 12，以组成完整的一行（如果需要留白则可以小于 12）。

提示：你可以将固定宽度布局（使用 .container 类）更改为全宽布局，只需将 .container 类替换为 .container-fluid 类即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full-Width Stacked-to-Horizontal Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid mt-3">
    <h1>Hello World!</h1>
    <div class="row">
      <div class="col-sm-6 p-3 bg-info-subtle">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-sm-6 p-3 bg-warning-subtle">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

注意：我们使用了 Bootstrap 5 的背景颜色工具类，例如 .bg-primary-subtle，以及内边距工具类，例如 .p-3 来设置样式，这是现代的最佳实践，取代了内联样式。