实现三栏网格布局的两种方法：Flexbox 与 Bootstrap

技术教程
2025-11-18 11:03:17

实现三栏网格布局的两种方法：flexbox 与 bootstrap

本文介绍了两种实现三栏网格布局的方法：使用 CSS Flexbox 和 Bootstrap 框架。Flexbox 提供了灵活的布局控制，而 Bootstrap 则通过预定义的类简化了网格系统的实现。文章将分别展示两种方法的代码示例，并简要说明其使用方式，帮助开发者快速构建所需的三栏布局。

使用 CSS Flexbox 实现三栏网格布局

Flexbox 是一种强大的 CSS 布局模块，它允许你轻松地创建复杂的布局，而无需使用浮动或定位。下面是如何使用 Flexbox 实现三栏网格布局的示例：

HTML 结构 (index.html):

<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 样式 (style.css):

.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; /* 示例背景色 */
  margin-bottom: 10px; /* 示例间距 */
  height: 95px; /* 示例高度 */
  text-align: center; /* 示例文字居中 */
  line-height: 95px; /* 示例文字垂直居中 */
}

代码解释:

.container 设置 display: flex，使其成为一个 Flex 容器。
.big__box 和 .small__boxes 是 Flex 容器的子元素，使用 flex 属性来分配可用空间。flex: 60% 和 flex: 40% 分别表示它们占据容器宽度的 60% 和 40%。
.small__boxes 也被设置为 Flex 容器，并且使用 flex-direction: column 将其子元素（.card）垂直排列。

注意事项:

flex 属性可以接受三个值：flex-grow、flex-shrink 和 flex-basis。 flex: 60% 相当于 flex: 60% 1 0。
可以根据需要调整 flex 属性的值来改变各栏的宽度比例。

使用 Bootstrap 实现三栏网格布局

Bootstrap 提供了一个强大的网格系统，可以轻松地创建响应式布局。下面是如何使用 Bootstrap 实现三栏网格布局的示例：

西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

21 查看详情西语写作助手

HTML 结构:

<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 (可选，用于样式定制):

.box1, .box2 {
    background-color: #ddd;
    height: 100px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 100px;
}

.col-md-8 {
    background-color: #eee;
    height: 210px;
}

代码解释:

container 类用于创建一个固定宽度的容器。
row 类用于创建一个行，行是 Bootstrap 网格系统的基本单位。
col-md-8 和 col-md-4 是 Bootstrap 的列类，它们指定了在 md (medium) 尺寸的屏幕上，该列占据的宽度。col-md-8 占据 8/12 的宽度，col-md-4 占据 4/12 的宽度。
d-flex 和 flex-column 类用于将 .small__cards 设置为 Flex 容器，并将其子元素垂直排列。

注意事项:

Bootstrap 的网格系统基于 12 列，可以根据需要调整列的宽度。
可以使用不同的列类（如 col-sm-*、col-lg-*、col-xl-*）来创建响应式布局，使其在不同尺寸的屏幕上显示不同的效果。
确保引入 Bootstrap 的 CSS 和 J*aScript 文件。

总结:

本文介绍了两种实现三栏网格布局的方法：Flexbox 和 Bootstrap。Flexbox 提供了更灵活的布局控制，而 Bootstrap 则通过预定义的类简化了网格系统的实现。选择哪种方法取决于你的具体需求和项目环境。如果需要更灵活的控制，推荐使用Flexbox。如果项目已经使用了Bootstrap或者需要快速搭建响应式布局，那么Bootstrap 是一个不错的选择。

以上就是实现三栏网格布局的两种方法：Flexbox 与 Bootstrap的详细内容，更多请关注其它相关文章！