Bootstrap 网格系统实例：堆叠的水平（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，布局设计始终是开发者需要面对的核心挑战之一。Bootstrap 的网格系统凭借其灵活性和易用性，成为构建响应式布局的首选工具。本文将围绕 "Bootstrap 网格系统实例：堆叠的水平" 这一主题，通过分步骤讲解、比喻类比和实战案例，帮助编程初学者和中级开发者深入理解如何通过网格系统实现元素在不同屏幕尺寸下的 "堆叠" 与 "水平排列" 的动态效果。

理解网格系统的底层逻辑

网格系统的核心概念

Bootstrap 的网格系统基于 12 列布局，通过容器（Container）、行（Row）和列（Column）的组合，将页面划分为可灵活调整的区块。其核心逻辑可以用 "棋盘格" 来比喻：

• 容器（Container）：如同棋盘的边界，定义了布局的总体范围；
• 行（Row）：类似棋盘的横向线，将容器划分为多个水平区域；
• 列（Column）：棋盘上的小方格，通过 col-* 类控制列的宽度比例。

例如，使用 col-6 表示该列占据 6 个单位宽度（总 12 单位），即占页面的一半。

响应式设计的关键：断点与类名

Bootstrap 的网格系统支持 响应式断点（xs、sm、md、lg、xl），通过在类名中添加断点前缀（如 col-md-6），可以定义不同屏幕尺寸下的布局行为。

• 堆叠效果：当屏幕宽度不足时，列会自动垂直堆叠；
• 水平排列：在足够宽的屏幕上，列按比例并排显示。

堆叠与水平排列的实现步骤

基础布局：两列的简单堆叠

以下是一个基础案例，展示如何通过网格系统实现两列在小屏幕（如手机）下堆叠、在大屏幕（如桌面）下并排的效果：

<div class="container">  
  <div class="row">  
    <div class="col-12 col-md-6">  
      <div class="box">左侧内容</div>  
    </div>  
    <div class="col-12 col-md-6">  
      <div class="box">右侧内容</div>  
    </div>  
  </div>  
</div>  

代码解析：

1. 容器与行：container 定义页面宽度，row 作为行容器；
2. 列类组合：
   • col-12：在 xs 尺寸下（默认），两列各占 12 列，即垂直堆叠；
   • col-md-6：当屏幕达到中等尺寸（md，通常为 768px）时，每列占据 6 列，形成并排布局。

进阶案例：三列布局的动态切换

以下案例演示如何让三列在小屏幕下堆叠，中等屏幕下变为两列+一列，大屏幕下完全并排：

<div class="container">  
  <div class="row">  
    <div class="col-12 col-sm-6 col-lg-4">  
      <div class="box">第一列</div>  
    </div>  
    <div class="col-12 col-sm-6 col-lg-4">  
      <div class="box">第二列</div>  
    </div>  
    <div class="col-12 col-sm-12 col-lg-4">  
      <div class="box">第三列</div>  
    </div>  
  </div>  
</div>  

关键点解释：

• 第三列的特殊处理：在 sm（中等屏幕）下，第三列使用 col-sm-12 占据整行，形成两列+一列的布局；
• lg 断点：当屏幕达到大尺寸（lg，992px）时，所有列变为 col-lg-4，即 12 ÷ 3 = 4 列，三列并排。

深入理解：如何控制堆叠顺序与偏移

堆叠顺序的反转

默认情况下，列按代码顺序堆叠。若需调整堆叠顺序，可使用 order-* 类：

<div class="row">  
  <div class="col-12 col-md-6 order-2 order-md-1">  
    <!-- 在移动端显示第二位，在桌面端显示第一位 -->  
  </div>  
  <div class="col-12 col-md-6 order-1 order-md-2">  
    <!-- 在移动端显示第一位，在桌面端显示第二位 -->  
  </div>  
</div>  

偏移（Offset）：创造列间距

通过 offset-* 类，可以在列左侧留出空隙：

<div class="row">  
  <div class="col-md-4 offset-md-2">  
    <!-- 在 md 屏幕下，左侧留出 2 列的空白 -->  
  </div>  
</div>  

实战案例：复杂布局的组合技巧

案例 1：头部导航栏与内容区域的分层

<!-- 头部导航栏：始终占据整行 -->  
<div class="row">  
  <div class="col-12">  
    <nav>...</nav>  
  </div>  
</div>  

<!-- 主要内容：桌面端两列，移动端堆叠 -->  
<div class="row">  
  <div class="col-12 col-md-8">主要内容</div>  
  <div class="col-12 col-md-4">侧边栏</div>  
</div>  

案例 2：嵌套网格实现复杂布局

<div class="row">  
  <div class="col-md-9">  
    <div class="row">  
      <div class="col-md-8">子内容 1</div>  
      <div class="col-md-4">子内容 2</div>  
    </div>  
  </div>  
  <div class="col-md-3">右侧栏</div>  
</div>  

常见问题与解决方案

问题 1：列无法水平排列

原因：可能未包裹 row 容器，或未正确使用列类。
解决方案：确保所有列都嵌套在 row 中，并检查类名是否包含 col-*。

问题 2：堆叠效果在大屏幕上失效

原因：可能误用了 col 而非 col-*，导致默认行为覆盖响应式设置。
解决方案：使用 col-sm-*、col-md-* 等断点类明确指定布局规则。

结论

通过本文的讲解，我们掌握了 Bootstrap 网格系统的核心原理、响应式断点的使用方法，以及如何通过类名组合实现 "堆叠的水平" 效果。无论是简单的两列布局，还是复杂的嵌套结构，网格系统都能通过灵活的类名和断点设置，帮助开发者快速构建适应多种设备的响应式页面。

实践建议：

1. 从简单案例开始，逐步尝试添加断点和偏移类；
2. 使用浏览器开发者工具实时调试，观察不同屏幕尺寸下的布局变化；
3. 结合实际项目需求，探索网格系统的更多高级功能（如自动列宽、Flexbox 工具类）。

掌握这一工具后，开发者将能更高效地应对网页布局挑战，为用户提供一致且优雅的跨设备体验。