如何使用 CSS Flexbox 和 Bootstrap 创建三栏网格布局

三栏网格布局是网页开发中非常常见的布局形式，常用于展示商品列表、文章卡片、功能模块等内容，使用 CSS Flexbox 和 Bootstrap 都能高效实现这类布局，两种方案各有特点，开发者可以根据项目需求选择。

一、使用原生 CSS Flexbox 实现三栏网格布局

Flexbox 是 CSS3 引入的弹性盒子布局模型，通过给容器设置 display: flex 属性，就能让内部的子元素按照弹性规则排列，非常适合实现网格类的布局效果。

1. 基础 HTML 结构

首先搭建三栏布局的基础 HTML 结构，包含一个容器和三个栏目的子元素，每个子元素内部可以放置对应的内容。

<div class="flex-three-column">
  <div class="column-item">
    <h4>第一栏</h4>
    <p>这是第一栏的内容区域，可以放置任意自定义内容</p>
  </div>
  <div class="column-item">
    <h4>第二栏</h4>
    <p>这是第二栏的内容区域，可以放置任意自定义内容</p>
  </div>
  <div class="column-item">
    <h4>第三栏</h4>
    <p>这是第三栏的内容区域，可以放置任意自定义内容</p>
  </div>
</div>

2. 对应的 CSS 样式

接下来编写 Flexbox 相关的样式，核心是通过 flex 属性控制子元素的宽度分配，同时可以添加间距和响应式适配规则。

/* 容器样式，开启 flex 布局 */
.flex-three-column {
  display: flex;
  gap: 20px; /* 栏目之间的间距 */
  padding: 20px;
  box-sizing: border-box;
}

/* 单个栏目样式 */
.column-item {
  flex: 1; /* 三个栏目平均分配容器宽度 */
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 响应式适配：屏幕宽度小于 768px 时改为垂直排列 */
@media (max-width: 768px) {
  .flex-three-column {
    flex-direction: column;
  }
}

上述代码中，flex: 1 会让三个栏目等宽分配容器的可用空间，gap 属性可以统一设置栏目之间的间距，不需要额外给子元素设置 margin。通过媒体查询可以在小屏幕设备上让三栏变为垂直排列，避免内容挤压。

二、使用 Bootstrap 实现三栏网格布局

Bootstrap 内置了成熟的网格系统，基于 flex 布局实现，只需要添加对应的类名就能快速完成布局，不需要手动编写大量 CSS 样式，适合快速开发的项目。

1. 引入 Bootstrap 资源

首先需要在 HTML 页面中引入 Bootstrap 的 CSS 文件，这里使用官方提供的 CDN 资源，实际项目中也可以下载到本地引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

2. 基于 Bootstrap 网格系统的 HTML 结构

Bootstrap 的网格系统需要外层容器使用 container 或 container-fluid 类，行使用 row 类，列使用 col-* 类，这里实现三栏等宽布局只需要给每个列添加 col 类即可。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="p-3 bg-light rounded">
        <h4>第一栏</h4>
        <p>这是第一栏的内容区域，可以放置任意自定义内容</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 bg-light rounded">
        <h4>第二栏</h4>
        <p>这是第二栏的内容区域，可以放置任意自定义内容</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 bg-light rounded">
        <h4>第三栏</h4>
        <p>这是第三栏的内容区域，可以放置任意自定义内容</p>
      </div>
    </div>
  </div>
</div>

Bootstrap 的 row 类默认会抵消容器的 padding，同时设置 display: flex，col 类会自动分配宽度，默认带有 12 栅格的间距，不需要手动设置 gap。如果需要控制不同屏幕尺寸下的布局，还可以添加响应式的列类，比如 col-md-4 表示在中等屏幕及以上每个栏目占 4 份栅格，刚好实现三栏等宽。

三、两种方案的选择建议

如果项目没有引入 Bootstrap 这类框架，且需要高度自定义布局细节，优先选择原生 CSS Flexbox 实现，灵活性更高，也不会增加额外的资源加载。如果项目已经使用了 Bootstrap 框架，或者需要快速完成开发，优先选择 Bootstrap 网格系统，能大幅减少样式编写的工作量，同时自带完善的响应式适配规则。

两种方案最终实现的三栏网格布局效果基本一致，核心都是基于 flex 布局的原理，开发者可以根据实际的项目场景灵活选择。

CSS_FlexboxBootstrap三栏网格布局前端布局修改时间：2026-06-10 00:15:30