如何使用Bootstrap实现如图所示的三栏网格布局？

以下是基于Bootstrap网格系统的三栏布局实现代码及细节说明：

基础平分三栏（响应式） #

这是最常用的方案，中等屏幕及以上显示三栏，小屏幕自动堆叠为单列：

<!-- 需在head标签内引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <!-- 第一栏 -->
    <div class="col-md-4">
      <div class="p-3 bg-light border">第一栏内容区域</div>
    </div>
    <!-- 第二栏 -->
    <div class="col-md-4">
      <div class="p-3 bg-light border">第二栏内容区域</div>
    </div>
    <!-- 第三栏 -->
    <div class="col-md-4">
      <div class="p-3 bg-light border">第三栏内容区域</div>
    </div>
  </div>
</div>

全屏幕始终三栏 #

如果需要在所有屏幕尺寸下都保持三栏布局，将col-md-4替换为col-4：

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="p-3 bg-light border">第一栏内容</div>
    </div>
    <div class="col-4">
      <div class="p-3 bg-light border">第二栏内容</div>
    </div>
    <div class="col-4">
      <div class="p-3 bg-light border">第三栏内容</div>
    </div>
  </div>
</div>

自定义布局优化 #

添加列间距与视觉效果 #

使用g-*类设置列间距，结合阴影、内边距优化视觉表现：

<div class="container my-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="p-4 bg-white shadow-sm">第一栏内容</div>
    </div>
    <div class="col-md-4">
      <div class="p-4 bg-white shadow-sm">第二栏内容</div>
    </div>
    <div class="col-md-4">
      <div class="p-4 bg-white shadow-sm">第三栏内容</div>
    </div>
  </div>
</div>

非平分比例布局 #

如果需要不同宽度的三栏（比如3-6-3的侧边栏+主内容结构），调整列的数值即可：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="p-3 bg-light border">侧边栏1</div>
    </div>
    <div class="col-md-6">
      <div class="p-3 bg-light border">主内容区</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 bg-light border">侧边栏2</div>
    </div>
  </div>
</div>

常见问题排查 #

• 网格不生效：确保列的直接父元素是row类，且已正确引入Bootstrap CSS文件
• 布局错乱：避免自定义CSS中使用float、position:absolute等属性干扰网格布局逻辑
• 全屏宽度需求：将container替换为container-fluid，实现全屏宽度的三栏布局

内容的提问来源于stack exchange，提问作者Harish Kumar