Bootstrap 4网格系统 - 响应式布局设计指南

最后编辑于2025-04-14 12:17:38.8498524 +0800 CST

Bootstrap 4 网格系统

Bootstrap 4 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。这套系统使得开发响应式网页变得简单直观。

网格系统基础

网格系统基于Flexbox实现，解决了许多传统布局方案的局限性。它允许你创建复杂的布局，同时保持代码的整洁和灵活。

网格系统特点

  • 响应式：根据屏幕尺寸自动调整列宽
  • 移动优先：默认设计模式是针对小屏幕设计，然后再向上扩展
  • 基于Flexbox：使用现代CSS Flexbox技术，不再依赖浮动布局
  • 12列系统：页面宽度被均匀分为12列，便于组织内容
  • 6个响应层级：支持不同设备尺寸的布局控制

网格类和断点

Bootstrap 4网格系统提供了5个响应级别的类，根据不同的屏幕尺寸展示不同的布局：

类前缀 设备类型 断点宽度 容器最大宽度
.col- 超小设备（手机） <576px 自动
.col-sm- 小型设备（平板） ≥576px 540px
.col-md- 中型设备（桌面） ≥768px 720px
.col-lg- 大型设备（大桌面） ≥992px 960px
.col-xl- 超大型设备（特大桌面） ≥1200px 1140px

例如，.col-sm-4 表示在小型设备及以上的屏幕宽度中，该列会占据12列中的4列。在小于576px的超小设备上，它会默认占据整行。

网格系统规则

使用Bootstrap 4网格系统需要遵循以下规则：

  1. 容器：网格行必须放在 .container 或 .container-fluid 类中
  2. 行：使用 .row 类创建水平列组
  3. 列嵌套：内容必须放在列中，只有列才能直接放在行内
  4. 列宽：一行中列宽的总和应该<=12，否则多余的列会另起一行
  5. 间隙宽度：列间的间隙默认为30px（每列两侧各15px）
  6. 无指定宽度：使用 .col 不指定宽度时，所有列会自动均分行宽

基本网格结构

以下是Bootstrap 4网格结构的基本模板：

html 
 1<!-- 固定宽度容器 -->
 2<div class="container">
 3  <!-- 创建一行 -->
 4  <div class="row">
 5    <!-- 创建列 -->
 6    <div class="col-sm-6 col-md-4 col-lg-3">第一列内容</div>
 7    <div class="col-sm-6 col-md-4 col-lg-3">第二列内容</div>
 8    <div class="col-sm-6 col-md-4 col-lg-3">第三列内容</div>
 9    <div class="col-sm-6 col-md-4 col-lg-3">第四列内容</div>
10  </div>
11</div>

在上面的例子中：

  • 在超小设备(<576px)上，每列占据整行
  • 在小型设备(≥576px)上，每行显示2列
  • 在中型设备(≥768px)上，每行显示3列
  • 在大型设备(≥992px)上，每行显示4列

自动均分列宽

不指定具体列数时，Bootstrap 4会自动均分可用宽度：

html 
1<div class="container">
2  <div class="row">
3    <div class="col">均分列1</div>
4    <div class="col">均分列2</div>
5    <div class="col">均分列3</div>
6  </div>
7</div>

上面的例子会创建3列等宽布局，每列宽度约为33.33%。这种自动布局是基于Flexbox实现的，是Bootstrap 4的一个强大特性。

响应式列

可以为不同屏幕尺寸设置不同的列宽：

html 
1<div class="container">
2  <div class="row">
3    <div class="col-12 col-sm-6 col-md-4 col-lg-3">响应式列</div>
4    <div class="col-12 col-sm-6 col-md-4 col-lg-3">响应式列</div>
5    <div class="col-12 col-sm-6 col-md-4 col-lg-3">响应式列</div>
6    <div class="col-12 col-sm-6 col-md-4 col-lg-3">响应式列</div>
7  </div>
8</div>

这段代码的响应式行为：

  • 在超小设备上：每列占满整行（100%宽度）
  • 在小型设备上：每行显示2列（50%宽度）
  • 在中型设备上：每行显示3列（33.33%宽度）
  • 在大型设备上：每行显示4列（25%宽度）

嵌套列

Bootstrap 4允许在一个列内嵌套更多的行和列：

html 
 1<div class="container">
 2  <div class="row">
 3    <div class="col-sm-6">
 4      <h3>第一列</h3>
 5      <div class="row">
 6        <div class="col-sm-6">嵌套列1</div>
 7        <div class="col-sm-6">嵌套列2</div>
 8      </div>
 9    </div>
10    <div class="col-sm-6">
11      <h3>第二列</h3>
12      <p>此列无嵌套内容</p>
13    </div>
14  </div>
15</div>

嵌套列也遵循12列网格系统，但它们相对于父列的宽度进行划分。

列偏移

可以使用 .offset-*-* 类来偏移列，创建更多空间：

html 
 1<div class="container">
 2  <div class="row">
 3    <div class="col-md-4">普通列</div>
 4    <div class="col-md-4 offset-md-4">偏移列</div>
 5  </div>
 6  <div class="row">
 7    <div class="col-md-3 offset-md-3">偏移列</div>
 8    <div class="col-md-3 offset-md-3">偏移列</div>
 9  </div>
10</div>

第一行中的第二列向右偏移了4列的宽度，所以它会出现在右侧。第二行的两列各自偏移了3列宽度，创建了居中效果。

列排序

使用 .order-* 类可以改变列的显示顺序：

html 
1<div class="container">
2  <div class="row">
3    <div class="col-md-4 order-md-2">第一列 - 显示在中间</div>
4    <div class="col-md-4 order-md-3">第二列 - 显示在右侧</div>
5    <div class="col-md-4 order-md-1">第三列 - 显示在左侧</div>
6  </div>
7</div>

尽管HTML中的顺序是1-2-3，但通过order类，它们会按照3-1-2的顺序显示。

实际应用示例

1. 响应式卡片网格

html 
 1<div class="container">
 2  <div class="row">
 3    <!-- 在手机上一行显示1张卡片，平板上显示2张，电脑上显示3张，大屏上显示4张 -->
 4    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
 5      <div class="card">
 6        <img src="image1.jpg" class="card-img-top" alt="...">
 7        <div class="card-body">
 8          <h5 class="card-title">卡片1</h5>
 9          <p class="card-text">卡片内容...</p>
10        </div>
11      </div>
12    </div>
13    <!-- 重复类似的卡片结构 -->
14  </div>
15</div>

2. 响应式导航布局

html 
 1<div class="container">
 2  <div class="row">
 3    <!-- 侧边栏，在小屏幕上隐藏 -->
 4    <nav class="col-md-3 d-none d-md-block">
 5      <div class="list-group">
 6        <a href="#" class="list-group-item">导航项目1</a>
 7        <a href="#" class="list-group-item">导航项目2</a>
 8        <a href="#" class="list-group-item">导航项目3</a>
 9      </div>
10    </nav>
11    <!-- 主内容区，在小屏幕上占据全宽 -->
12    <main class="col-md-9">
13      <h2>主要内容</h2>
14      <p>这里是页面的主要内容...</p>
15    </main>
16  </div>
17</div>

3. 简单的页脚布局

html 
 1<footer class="bg-dark text-light py-4">
 2  <div class="container">
 3    <div class="row">
 4      <div class="col-md-4 mb-3">
 5        <h5>关于我们</h5>
 6        <p>公司简介信息...</p>
 7      </div>
 8      <div class="col-md-4 mb-3">
 9        <h5>快速链接</h5>
10        <ul class="list-unstyled">
11          <li><a href="#" class="text-light">首页</a></li>
12          <li><a href="#" class="text-light">服务</a></li>
13          <li><a href="#" class="text-light">联系我们</a></li>
14        </ul>
15      </div>
16      <div class="col-md-4 mb-3">
17        <h5>联系方式</h5>
18        <address>
19          地址信息<br>
20          电话: 123-456-7890<br>
21          邮箱: info@example.com
22        </address>
23      </div>
24    </div>
25  </div>
26</footer>

总结

Bootstrap 4的网格系统是一个强大的工具，可以帮助你创建复杂的响应式布局。它的主要优势包括：

  1. 灵活性：适应各种屏幕尺寸和设备类型
  2. 简洁的语法：简单的类名系统易于学习和使用
  3. 基于Flexbox：提供更好的对齐和分布选项
  4. 响应级别多：提供5个断点，精细控制布局
  5. 自动均分：无需指定宽度，可自动平均分配

掌握网格系统是使用Bootstrap 4的关键，它是创建现代、响应式网站的基础。