案例 多列布局

Bootstrap 5 案例：多列布局

使用 Bootstrap 5 网格系统创建多列布局

使用 Bootstrap 5，利用其强大的 12 列网格系统创建响应式多列布局变得非常简单。

Bootstrap 提供了一个响应式、移动设备优先的基于 Flexbox 的网格系统。列会根据屏幕尺寸自动重新排列，在较小的屏幕上会垂直堆叠，除非另有指定。

网格系统关键规则：

• 布局通常以容器开始：<div class="container">（固定宽度，响应式）或 <div class="container-fluid">（全宽度）。
• 在容器内使用 <div class="row"> 创建行。行是列的包装器。
• 使用预定义的列类，如 .col-md-4、.col-lg-6 等，来定义列的宽度。md 指中等设备（平板电脑，≥768px），lg 指大型设备（台式机，≥992px）。还有 sm（小型，≥576px）、xl（超大型，≥1200px）和 xxl（超超大型，≥1400px）。纯粹的 .col 类创建等宽列。
• 通过指定你希望跨越的 12 个可用列中的数量来创建网格列。例如，在中等设备及以上屏幕上创建三个等宽列，将使用三个 .col-md-4 类。
• 在同一 .row 中的 .col-*-* 类中的数字理想情况下应加起来等于 12。如果超过 12，列会换行。如果小于 12，除非使用自动布局类（.col），否则它们不会填满整行。
• 内容应直接放置在网格列内部。
• 间隔（列之间的间距）可以使用 g-*、gx-*（水平）、gy-*（垂直）等间隔类在 .row 元素上控制（例如，<div class="row g-3">）。

以下示例展示了如何在在中等设备和更大尺寸屏幕上创建四个等宽列。在小型设备上，它们将堆叠显示。

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 3: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 4: Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
    </div>
  </div>
</div>

<!--
  实际应用：非常适合特性列表、产品展示或团队成员介绍部分。
  学习技巧：尝试将 'col-md-3' 改为 'col-sm-6 col-lg-3'，观察布局在不同屏幕尺寸下的适应情况。
  例如，'col-sm-6 col-lg-3' 表示：在小型屏幕上显示 2 列，在大型屏幕上显示 4 列。
  资源：Bootstrap 网格系统文档：https://getbootstrap.com/docs/5.3/layout/grid/
-->

不同宽度的列

你也可以在同一行中创建不同宽度的列。

以下示例创建了一个三列布局，其中中间列在中等设备及以上屏幕上比第一列和最后一列宽：

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3">
      <div class="p-3 border bg-light">
        <h5>Sidebar/Info</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-3 border bg-success-subtle">
        <h5>Main Content Area</h5>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">
        <h5>Ads/Related Links</h5>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
</div>

<!--
  注意：类 .p-3、.border、.bg-light、.bg-success-subtle 和 .mt-3 是 Bootstrap 的工具类，分别用于设置内边距、边框、背景颜色和外边距。
  常见障碍：确保一行中列单位的总和与布局相符。虽然 Bootstrap 非常灵活，但规划好列跨度有助于创建可预测的布局。
-->