Bootstrap 中屏幕网格

Bootstrap 5 网格系统 - 中型设备

Bootstrap 网格示例：针对中型设备

Bootstrap 的网格系统允许你为不同的屏幕尺寸定义不同的列布局。本章节重点介绍 .col-md-* 类如何应用于中型设备，以及它们如何与用于更小或更大设备的类进行交互。

在 Bootstrap 5 中，中型设备 (md) 被定义为屏幕宽度为 768 像素或更大（≥768px）的设备。

我们来看一个示例，我们希望在小型设备 (.col-sm-*) 上实现 25%/75% 的分割，并在中型设备 (.col-md-*) 及更大设备上实现 50%/50% 的分割。

对于小型设备（≥576px），我们可以使用 .col-sm-3 (25%) 和 .col-sm-9 (75%)。对于中型设备（≥768px）及更大设备，我们希望使用 .col-md-6 (50%) 和 .col-md-6 (50%)。

我们的列上组合使用的类将是：

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Bootstrap 的移动优先方法意味着网格类应用于其指定的断点及更宽的屏幕，除非被更大的断点类覆盖。所以：

在超小型屏幕 (<576px) 上，列会堆叠（默认行为）。
在小型屏幕 (≥576px 但 <768px) 上，.col-sm-3 和 .col-sm-9 生效，导致 25%/75% 的分割。
在中型屏幕 (≥768px) 及更大屏幕（除非被 .col-lg-*、.col-xl-* 等覆盖）上，.col-md-6 和 .col-md-6 生效，导致 50%/50% 的分割。

以下示例演示了这种行为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Medium Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义样式用于可视化 */
    .content-area {
      padding: 1rem;
      margin-bottom: 1rem; /* 如果行堆叠，用于间距 */
    }
  </style>
</head>
<body>
  <div class="container-fluid mt-3">
    <h1>Responsive Grid Demo</h1>
    <p>Resize your browser window to see the layout change at different breakpoints.</p>
    <div class="row">
      <div class="col-sm-3 col-md-6">
        <div class="content-area bg-info-subtle border">
          <h5>Column 1 (sm-3, md-6)</h5>
          <p>On small screens (sm), this column takes up 3 of 12 units (25%).</p>
          <p>On medium screens (md) and up, it takes 6 of 12 units (50%).</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
      <div class="col-sm-9 col-md-6">
        <div class="content-area bg-warning-subtle border">
          <h5>Column 2 (sm-9, md-6)</h5>
          <p>On small screens (sm), this column takes up 9 of 12 units (75%).</p>
          <p>On medium screens (md) and up, it takes 6 of 12 units (50%).</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS Bundle (包含 Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<!--
  实际应用：这对于在不同屏幕尺寸下边栏变得更宽或主要内容区域调整其突出程度很有用。
  常见障碍：理解断点类如何相互覆盖。记住：`xs` (默认/无前缀) < `sm` < `md` < `lg` < `xl` < `xxl`。更大的断点类会覆盖同时存在的小断点类。
  资源：Bootstrap 网格断点：https://getbootstrap.com/docs/5.3/layout/breakpoints/
-->

	注意：确保单行 (`.row`) 内特定断点的列单位总和对于你想要的布局是合理的，通常加起来为 12 以构成完整的一行。Bootstrap 很灵活，但这有助于规划。

下一章节可能会探讨如何为大型 (.col-lg-*) 或超大型 (.col-xl-*) 设备添加不同的分割，或介绍列排序和偏移等特性。