异常教程

Bootstrap4 网格系统（千字长文）

更新时间:

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

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

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

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

在现代网页开发中，Bootstrap4 网格系统是构建响应式布局的核心工具之一。它通过一套预定义的类名和灵活的列系统，帮助开发者快速实现跨设备自适应的设计。对于编程初学者而言，掌握这一系统能显著提升开发效率；对于中级开发者，深入理解其底层逻辑则有助于解决复杂布局问题。本文将从基础概念出发，结合实际案例，逐步解析 Bootstrap4 网格系统 的核心原理与应用场景，帮助读者构建扎实的知识体系。

一、什么是网格系统？

想象一个网页布局如同搭建乐高积木：每一列、每一行都需要按照规则排列，才能形成稳定且美观的结构。Bootstrap4 网格系统正是这样一个“积木框架”，它将页面划分为12列（columns）的等宽容器，并通过响应式断点（breakpoints）适配不同设备的屏幕尺寸。

核心概念

  1. 容器（Containers）：定义内容区域的边界，如 container（固定宽度）和 container-fluid（全宽）。
  2. 行（Rows）：必须嵌套在容器内，用于包裹列（columns）。
  3. 列（Columns）：通过类名如 col-、col-sm- 等定义列的宽度比例。

例如，一个简单的两列布局代码如下：

<div class="container">  
  <div class="row">  
    <div class="col-4">左侧栏</div>  
    <div class="col-8">右侧栏</div>  
  </div>  
</div>

此代码将页面分为12等分，左侧占4列（约33%宽度），右侧占8列（约66%宽度）。

二、响应式断点与媒体查询

Bootstrap4 网格系统的核心优势在于响应式设计。它通过预设的5个断点（xs、sm、md、lg、xl）适配不同屏幕尺寸，并自动调整列的排列方式。

断点定义与适用场景

断点最小宽度（px）典型设备
xs<576手机（横向或竖向）
sm≥576小平板或桌面设备
md≥768平板或中型桌面设备
lg≥992大型桌面设备
xl≥1200超大屏幕或显示器

实战案例：自适应导航栏

<div class="container">  
  <div class="row">  
    <div class="col-12 col-md-3">  
      <!-- 左侧导航栏，在桌面设备显示3列，移动端占满12列 -->  
    </div>  
    <div class="col-12 col-md-9">  
      <!-- 主要内容区域 -->  
    </div>  
  </div>  
</div>

在小屏幕设备上，导航栏会与内容区域堆叠；当屏幕宽度≥768px时，两者并排显示。

三、进阶技巧：嵌套、偏移与排序

1. 嵌套列

当需要更复杂的布局时，可以在已有列中嵌套新的行与列。例如：

<div class="row">  
  <div class="col-md-9">  
    <div class="row">  
      <div class="col-md-6">嵌套列1</div>  
      <div class="col-md-6">嵌套列2</div>  
    </div>  
  </div>  
  <div class="col-md-3">右侧栏</div>  
</div>

此代码在右侧栏外，左侧区域被进一步分为两列，适用于文章列表与子分类的组合场景。

2. 列偏移（Offset）

通过 offset-* 类名可为空出指定列数的空间。例如：

<div class="row">  
  <div class="col-md-4 offset-md-4">  
    <!-- 此列在md及以上设备向右偏移4列，实际占据中心的4列 -->  
  </div>  
</div>

此技巧常用于卡片居中或留白设计。

3. 列排序（Order）

通过 order-* 类名可调整列的显示顺序，例如：

<div class="row">  
  <div class="col-md-6 order-last">  
    <!-- 在md及以上设备，此列会移动到最后一个位置 -->  
  </div>  
  <div class="col-md-6 order-first">  
    <!-- 此列会移动到最前面 -->  
  </div>  
</div>

这对于响应式布局中的内容优先级调整非常实用。

四、常见问题与解决方案

问题1：列总宽度超过12列怎么办？

Bootstrap4 网格系统会自动将多余的列压缩为单行，或根据 flex-wrap: wrap 属性换行。例如：

<div class="row">  
  <div class="col-md-8">...</div>  
  <div class="col-md-8">...</div>  
</div>

此时两列总宽度为16列，超出的4列将自动换行。

问题2：如何实现等高列？

由于CSS的灵活性，可结合 d-flex 和 align-items-stretch 类名强制列等高：

<div class="row align-items-stretch">  
  <div class="col-md-6">内容A</div>  
  <div class="col-md-6">内容B</div>  
</div>

此方法利用Flexbox布局特性，确保所有列高度一致。

五、实战项目：搭建博客首页

需求分析

设计一个包含导航栏、侧边栏和文章列表的博客首页，要求：

  • 导航栏在移动端折叠为汉堡菜单；
  • 侧边栏在桌面设备显示，移动端隐藏；
  • 文章列表与侧边栏并排显示。

代码实现

<!-- 导航栏 -->  
<nav class="navbar navbar-expand-md">  
  <div class="container">  
    <a class="navbar-brand" href="#">Blog</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navMenu">  
      <ul class="navbar-nav ml-auto">  
        <li class="nav-item">...</li>  
      </ul>  
    </div>  
  </div>  
</nav>  

<!-- 主体内容 -->  
<div class="container">  
  <div class="row">  
    <div class="col-12 col-md-8">  
      <!-- 文章列表 -->  
      <div class="row">  
        <div class="col-12 mb-3" v-for="article in articles">...</div>  
      </div>  
    </div>  
    <div class="col-md-4 d-none d-md-block">  
      <!-- 侧边栏：仅在md及以上设备显示 -->  
      <div>热门文章</div>  
      <div>分类导航</div>  
    </div>  
  </div>  
</div>

结论

通过本文的讲解，读者应已掌握 Bootstrap4 网格系统 的核心概念、响应式断点应用及进阶技巧。从基础布局到复杂项目实践，这一工具链为开发者提供了高效且灵活的解决方案。未来版本的Bootstrap（如Bootstrap5）在网格系统上进行了优化，但其底层逻辑与 Bootstrap4 的兼容性仍较高，学习本系统能为后续技术升级打下坚实基础。

建议读者通过以下步骤深化理解：

  1. 从简单两列布局开始，逐步尝试嵌套与偏移操作；
  2. 使用浏览器开发者工具（如Chrome DevTools）实时调试不同断点下的布局效果；
  3. 参考官方文档（https://getbootstrap.com）探索更多高级功能。

掌握 Bootstrap4 网格系统，不仅能提升开发效率，更能培养对响应式设计的全局思维——这正是现代前端开发不可或缺的核心能力之一。

最新发布

查看更多文章