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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-17

浏览次数：次

返回列表

如何使用 css flexbox 和 bootstrap 创建三栏网格布局

本文将介绍如何使用 CSS Flexbox 和 Bootstrap 两种方法实现一个包含一个大区域和两个小区域的三栏网格布局。通过 Flexbox，我们可以灵活地控制容器内元素的排列方式，而 Bootstrap 提供的栅格系统则可以快速搭建响应式布局。文章将提供详细的代码示例，帮助你理解这两种方法的具体实现步骤。

使用 CSS Flexbox 创建三栏网格布局

Flexbox 是一种强大的 CSS 布局模块，可以轻松实现各种复杂的布局。以下是使用 Flexbox 创建三栏网格布局的步骤：

HTML 结构

首先，我们需要定义 HTML 结构。创建一个容器 div，其中包含一个大区域 big__box 和一个小区域容器 small__boxes。small__boxes 容器又包含两个小区域 card。

<div class="container">
  <div class="big__box"></div>
  <div class="small__boxes">
    <div class="card">card 1</div>
    <div class="card">card 2</div>
  </div>
</div>

CSS 样式

接下来，使用 CSS 定义容器和区域的样式。关键在于使用 display: flex 将容器设置为 Flex 容器，并使用 flex 属性来控制每个区域的宽度比例。

.container {
  display: flex;
}

.big__box {
  flex: 60%; /* 大区域占据 60% 的宽度 */
  background-color: #eee; /* 示例背景色 */
  height: 200px; /* 示例高度 */
}

.small__boxes {
  flex: 40%; /* 小区域容器占据 40% 的宽度 */
  display: flex;
  flex-direction: column; /* 将小区域垂直排列 */
}

.card {
  background-color: #ddd; /* 示例背景色 */
  height: 100px; /* 示例高度 */
  margin-bottom: 10px; /* 示例间距 */
}

在这个例子中，container 被设置为 display: flex，这意味着它的直接子元素（big__box 和 small__boxes）将成为 Flex 项目。big__box 的 flex: 60% 意味着它将占据容器 60% 的可用空间，而 small__boxes 的 flex: 40% 意味着它将占据剩余的 40% 空间。small__boxes 内部也使用了 display: flex 和 flex-direction: column，这使得它的子元素（card）能够垂直排列。

使用 Bootstrap 创建三栏网格布局

Bootstrap 提供了一个强大的栅格系统，可以轻松创建响应式布局。以下是使用 Bootstrap 创建三栏网格布局的步骤：

引入 Bootstrap

首先，确保你的项目中引入了 Bootstrap 的 CSS 和 J*aScript 文件。你可以通过 CDN 引入，也可以下载到本地。

ChatCut

AI视频剪辑工具

1086 查看详情 ChatCut

HTML 结构

使用 Bootstrap 的栅格类来定义 HTML 结构。使用 container 类创建一个容器，然后使用 row 类创建一个行。在行中使用 col-md-* 类来定义列的宽度。

<div class="container">
  <div class="row">
    <div class="col-md-8">//big box</div>
    <div class="col-md-4">
      <div class="small__cards d-flex flex-column">
        <div class="box1">
          <!-- box 1 -->
        </div>
        <div class="box2">
          <!-- box 2 -->
        </div>
      </div>
    </div>
  </div>
</div>

CSS 样式 (可选)

你也可以添加自定义 CSS 样式来进一步定制布局。

.box1 {
  background-color: #eee; /* 示例背景色 */
  height: 100px; /* 示例高度 */
  margin-bottom: 10px; /* 示例间距 */
}

.box2 {
  background-color: #ddd; /* 示例背景色 */
  height: 100px; /* 示例高度 */
}

在这个例子中，col-md-8 占据了中等屏幕及以上屏幕的 8/12 的宽度，col-md-4 占据了剩余的 4/12 的宽度。d-flex flex-column 类用于将 small__cards 容器设置为 Flex 容器，并使其子元素垂直排列。

总结

本文介绍了使用 CSS Flexbox 和 Bootstrap 两种方法创建三栏网格布局。Flexbox 提供了更灵活的布局控制，而 Bootstrap 的栅格系统则可以快速搭建响应式布局。选择哪种方法取决于你的具体需求和项目情况。如果需要更细粒度的控制和自定义，Flexbox 可能是更好的选择。如果需要快速搭建响应式布局，Bootstrap 则更加方便。

注意事项：