Bootstrap 5中图片容器无法水平排列的问题求助

DevOps 小满

2026-8-22

问题：Bootstrap 5 图片容器无法水平排列

我是Web开发新手，在使用Bootstrap 5开发时，发现图片容器（container-for-hover，之前误写为container-for-image）无法水平排列。尝试过官方文档、W3School的Bootstrap 5 Flex教程，也用了flex-row类，但都没效果。目标是让每个row类div中的container-for-hover容器水平排列。

当前效果截图

当前输出效果

当前代码

CSS代码

.img-size-square {
    width:  100%;
    height:  auto;
    max-width: 400px !important;
    max-height: 400px !important;
}

.container-for-hover {
  position: relative;
  width: 50%;
}

.image-for-hover {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-for-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #6633ff;
}

.container-for-hover:hover .overlay-for-hover {
  opacity: 1;
}

.text-for-hover {
  color: white;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

HTML代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="row">
  <div class="row">
    <div class="d-flex col-12">
      <div class="mx-auto">
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 1, Row 1</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 2, Row 1</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 3, Row 1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="d-flex col-12">
      <div class="mx-auto">
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 1, Row 2</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 2, Row 2</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 3, Row 2</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

问题原因

包裹container-for-hover的.mx-auto容器未启用flex布局，子元素默认以块级元素换行显示。
container-for-hover设置了width:50%，即使启用flex，这个宽度也会导致一行最多放2个容器，且没有间距控制，容易挤在一起。
HTML结构存在冗余嵌套的row，不符合Bootstrap栅格规范，可能干扰布局逻辑。

修复方案

修改后的CSS代码

.img-size-square {
    width:  100%;
    height:  auto;
    max-width: 400px !important;
    max-height: 400px !important;
}

.container-for-hover {
  position: relative;
  /* 替换原width:50%，设置flex基础宽度为30%，留出间距 */
  flex: 0 0 30%;
  margin: 0 1.5%;
}

.image-for-hover {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-for-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #6633ff;
}

.container-for-hover:hover .overlay-for-hover {
  opacity: 1;
}

.text-for-hover {
  color: white;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

修改后的HTML代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid">
  <!-- 第一行图片容器 -->
  <div class="row mb-4">
    <div class="col-12">
      <!-- 添加d-flex flex-wrap启用水平排列+自动换行，justify-content-center居中对齐 -->
      <div class="mx-auto d-flex flex-wrap justify-content-center">
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 1, Row 1</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 2, Row 1</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 3, Row 1</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 第二行图片容器 -->
  <div class="row">
    <div class="col-12">
      <div class="mx-auto d-flex flex-wrap justify-content-center">
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 1, Row 2</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 2, Row 2</div>
          </div>
        </div>
        <div class="container-for-hover img-size-square mb-2">
          <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
          <div class="overlay-for-hover">
            <div class="text-for-hover">Some Content Here 3, Row 2</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明

给包裹容器添加d-flex flex-wrap justify-content-center：d-flex启用flex布局实现水平排列，flex-wrap保证空间不足时自动换行，justify-content-center让容器居中对齐。
调整container-for-hover的flex属性：flex:0 0 30%设置固定基础宽度，配合margin:0 1.5%控制间距，确保一行能放下3个容器且不拥挤。
简化HTML结构：去掉冗余嵌套的row，使用container-fluid配合标准栅格结构，更符合Bootstrap布局规范。

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

Bootstrap 5中图片容器无法水平排列的问题求助

当前效果截图 #

当前代码 #

CSS代码 #

HTML代码 #

问题原因 #

修复方案 #

修改后的CSS代码 #

修改后的HTML代码 #

关键修改说明 #