Bootstrap 小屏幕网格

Bootstrap 网格 - 针对小型设备（及更大）

Bootstrap 网格示例：定位小型设备

让我们创建一个简单的两列布局。我们希望这些列从小型设备开始按 25%/75% 的比例（或 3/12 和 9/12）划分，并在更大屏幕上保持这个比例，除非另行指定。

提示：在 Bootstrap 5 中，‘小型’ 设备 (sm) 定义为屏幕宽度大于或等于 576 像素。特小型设备 (<576px) 的布局通过 .col-*（不带断点前缀）或默认的堆叠行为来处理。

对于小型设备及更大屏幕，我们将使用 .col-sm-* 类。Bootstrap 的网格系统基于 12 列。

要实现 25%/75% 的划分，我们将使用 .col-sm-3（12 列中的 3 列）和 .col-sm-9（12 列中的 9 列）：

<div class="container">
  <div class="row">
    <div class="col-sm-3">....</div>
    <div class="col-sm-9">....</div>
  </div>
</div>

Bootstrap 对此的解释是：‘从小型 (sm) 断点开始及以上，应用这些列宽度。在小于 ‘sm’ 的屏幕（特小型）上，这些列将默认垂直堆叠。’

这里是一个完整示例，展示在小型设备及以上实现 25%/75% 的划分。在特小型屏幕上，这些列将堆叠：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Small Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Optional: for better visualization */
    /* 可选：为了更好的视觉效果 */
    .row > div { padding-top: .75rem; padding-bottom: .75rem; }
    .col-sm-3 { background-color: #e9ecef; border: 1px solid #ced4da; }
    .col-sm-9 { background-color: #f8f9fa; border: 1px solid #ced4da; }
  </style>
</head>
<body>
  <div class="container-fluid mt-3">
    <h1>响应式列</h1>
    <div class="row">
      <div class="col-sm-3">
        <p>这是 25% 的列 (col-sm-3)。</p>
        <p>在小型屏幕和更宽屏幕上，它占用 12 个可用单位中的 3 个。</p>
      </div>
      <div class="col-sm-9">
        <p>这是 75% 的列 (col-sm-9)。</p>
        <p>在小型屏幕和更宽屏幕上，它占用 12 个可用单位中的 9 个。在特小型屏幕上，此列将堆叠在第一个列下方。</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

注意：在一个 .row 中，针对特定断点的列单位总数理想情况下不应超过 12。如果超过，多余的列将换行到下一行。你也可以使用不带数字的 .col-sm 类，让列在 ‘sm’ 断点及以上自动在行内平均分配宽度。

应用场景：博客布局中，主要内容区域（例如 .col-sm-8）占据大部分宽度，而侧边栏（例如 .col-sm-4）包含链接或广告。在移动设备上，侧边栏会堆叠在主要内容下方，以便更好地阅读。