如何在Bootstrap List Group中实现文本与图片的同一行对齐？

我最近在开发一个网站项目，其中某个模块需要制作List Group，用来展示项目名称，同时在每个列表项的右侧放置对应的图片。我已经用Pingendo完成了初步搭建，但遇到了一个问题：文本和图片没法正确对齐，当前显示效果是文本在上、图片在下，完全不在同一行。

现有代码 #

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-2"> 
    </div> 
    <div class="col-sm-8"> 
      <!-- Page Content --> 
      <div class="container"> 
        <div class="row text-center text-lg-left"> 
          <div class="col-md-12"> 
            <div class="list-group my-3"> 
              <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> 
                <div class="w-100"> 
                  <h4 class="mb-1 text-center">Arduino Uno</h4> 
                </div> 
                <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="150" height="150" > 
              </a> 
              <!-- 原代码存在多余的</a>标签，已移除 -->
              <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> 
                <div class="w-100"> 
                  <h5 class="mb-1 text-center">Breadboard</h5> 
                </div> 
                <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > 
              </a> 
              <!-- 原代码存在多余的</a>标签，已移除 -->
              <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> 
                <div class="w-100"> 
                  <h5 class="mb-1 text-center">Product</h5> 
                </div> 
                <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > 
              </a> 
              <!-- 原代码存在多余的</a>标签，已移除 -->
            </div> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当前显示效果 #

我希望实现文本与图片在同一行对齐的效果，请问有没有合适的解决方案？

解决方案 #

问题核心在于你给list-group-item添加了flex-column类，这个类会强制列表项内部元素垂直排列，所以文本和图片才会上下分离。我们只需要调整Bootstrap的Flex布局类，就能轻松实现水平对齐：

1. 将list-group-item的flex-column align-items-start替换为flex-row align-items-center，让内部元素从垂直排列改为水平排列，并保持垂直居中。
2. 给文本容器添加flex-grow-1类，让它占据列表项的剩余宽度，确保图片自动靠右侧对齐。
3. 移除多余的float-right（Flex布局已能精准控制位置，浮动会干扰布局），同时修复原代码中冗余的</a>标签。

修改后的完整代码如下：

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-2"> 
    </div> 
    <div class="col-sm-8"> 
      <!-- Page Content --> 
      <div class="container"> 
        <div class="row text-center text-lg-left"> 
          <div class="col-md-12"> 
            <div class="list-group my-3"> 
              <a href="#" class="list-group-item list-group-item-action flex-row align-items-center"> 
                <div class="flex-grow-1"> 
                  <h4 class="mb-1">Arduino Uno</h4> 
                </div> 
                <img class="img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="150" height="150" > 
              </a> 
              <a href="#" class="list-group-item list-group-item-action flex-row align-items-center"> 
                <div class="flex-grow-1"> 
                  <h5 class="mb-1">Breadboard</h5> 
                </div> 
                <img class="img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > 
              </a> 
              <a href="#" class="list-group-item list-group-item-action flex-row align-items-center"> 
                <div class="flex-grow-1"> 
                  <h5 class="mb-1">Product</h5> 
                </div> 
                <img class="img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > 
              </a> 
            </div> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• flex-row：将列表项内部元素从垂直布局切换为水平布局，这是实现同行对齐的核心。
• align-items-center：让文本和图片在垂直方向上居中对齐，避免出现上下错位的情况。
• flex-grow-1：让文本容器占据列表项的剩余宽度，确保图片始终固定在右侧，不会挤压文本空间。
• 移除float-right：Flex布局已经能精准控制元素位置，浮动属性会干扰Flex的布局逻辑，所以需要去掉。

这样修改后，文本和图片就能完美地在同一行对齐了！

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