如何使用Bootstrap在网页上创建3列布局？

3列布局+圆形图片完整实现（Bootstrap 5版本） #

使用Bootstrap原生栅格系统和自带圆角类即可实现需求，无需复杂自定义CSS：

• 3列布局直接使用Bootstrap栅格的.row + 三个.col-md-4即可实现响应式三列，中等宽度以上设备展示三列，移动端自动堆叠为单列
• 圆形图片直接使用Bootstrap自带的.rounded-circle类，额外设置固定宽高+object-fit: cover即可保证正圆效果不形变

完整代码示例 #

<!-- 确保你已经在页面head引入了Bootstrap 5的CSS文件 -->
<div class="container py-5">
  <div class="row g-4"> <!-- g-4用于设置列间距 -->
    <!-- 第一列 -->
    <div class="col-md-4 text-center">
      <img src="你的图片地址" class="rounded-circle mb-3" style="width: 180px; height: 180px; object-fit: cover;" alt="列1图片">
      <h5>标题1</h5>
      <p>这里是列的描述内容</p>
    </div>
    <!-- 第二列 -->
    <div class="col-md-4 text-center">
      <img src="你的图片地址" class="rounded-circle mb-3" style="width: 180px; height: 180px; object-fit: cover;" alt="列2图片">
      <h5>标题2</h5>
      <p>这里是列的描述内容</p>
    </div>
    <!-- 第三列 -->
    <div class="col-md-4 text-center">
      <img src="你的图片地址" class="rounded-circle mb-3" style="width: 180px; height: 180px; object-fit: cover;" alt="列3图片">
      <h5>标题3</h5>
      <p>这里是列的描述内容</p>
    </div>
  </div>
</div>

不使用Bootstrap的纯CSS实现方案 #

如果不想使用框架，可以用Flex布局实现三列，自定义圆形图片样式：

/* 自定义CSS代码 */
.three-column-wrap {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
}
.column-item {
  flex: 1;
  text-align: center;
}
.circle-img {
  width: 180px;
  height: 180px;
  border-radius: 50%; /* 实现圆形的核心属性 */
  object-fit: cover;
  margin-bottom: 1rem;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .three-column-wrap {
    flex-direction: column;
  }
}

对应HTML结构：

<div class="three-column-wrap">
  <div class="column-item">
    <img src="你的图片地址" class="circle-img" alt="列1图片">
    <h5>标题1</h5>
    <p>描述内容</p>
  </div>
  <div class="column-item">
    <img src="你的图片地址" class="circle-img" alt="列2图片">
    <h5>标题2</h5>
    <p>描述内容</p>
  </div>
  <div class="column-item">
    <img src="你的图片地址" class="circle-img" alt="列3图片">
    <h5>标题3</h5>
    <p>描述内容</p>
  </div>
</div>

效果参考图 #

内容的提问来源于stack exchange，提问作者Kashvi Mehra