如何在Bootstrap卡片中实现图片与文本列表并排布局？

2016年用Muse搭建的网站，现在Muse已经停运，即便订阅也打不开原文件，只能导出最后一页。这一页内容很多，包含120多张图片，每张图片旁都配有小型文本列表。我正在用Bootstrap和HTML重构这个页面，但始终没法实现图片和列表的并排布局，找了相关代码调整也没解决。最终需要每张卡片能链接到对应的传记页面。

以下是我尝试的代码：

<div class="card w-50">
    <div class="card-img-top d-flex align-items-center bg-light">
        <div>
            <img src="images/headshots/actor-Headshot.jpg" alt="actor headshot" class="img-fluid">
        </div>
        <h5 class="card-title">Card title</h5>
        <div class="card-header">
            actor
        </div>
            <div class="card" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Star Wars Saga</li>
                    <li class="list-group-item">Indiana Jones</li>
                    <li class="list-group-item">Blade Runner</li>
                    <li class="list-group-item">Witness</li>
                    <li class="list-group-item">Star Wars: The Force Awakens</li>
                </ul>
            </div>
            </div>

解决方案调整 #

你当前的代码结构嵌套混乱，导致布局失效。可以用Bootstrap的flex布局或网格系统实现图片与列表的并排，同时满足卡片跳转需求，以下是两种实用写法：

方法1：Flex布局实现横向卡片 #

<!-- 用a标签包裹整个卡片，直接实现跳转 -->
<a href="biography.html" class="text-decoration-none text-dark d-block mb-3">
  <div class="card w-75 d-flex flex-row align-items-stretch">
    <!-- 固定宽度的图片区域 -->
    <div class="flex-shrink-0">
      <img src="images/headshots/actor-Headshot.jpg" alt="actor headshot" class="img-fluid" style="width: 160px; height: auto;">
    </div>
    <!-- 内容区域自动填充剩余空间 -->
    <div class="card-body d-flex flex-column">
      <h5 class="card-title">Card title</h5>
      <div class="text-muted mb-2">actor</div>
      <ul class="list-group list-group-flush flex-grow-1">
        <li class="list-group-item">Star Wars Saga</li>
        <li class="list-group-item">Indiana Jones</li>
        <li class="list-group-item">Blade Runner</li>
        <li class="list-group-item">Witness</li>
        <li class="list-group-item">Star Wars: The Force Awakens</li>
      </ul>
    </div>
  </div>
</a>

方法2：网格系统实现响应式布局 #

<a href="biography.html" class="text-decoration-none text-dark d-block mb-3">
  <div class="card w-75">
    <div class="row g-0">
      <!-- 图片列，占4份宽度 -->
      <div class="col-md-4">
        <img src="images/headshots/actor-Headshot.jpg" alt="actor headshot" class="img-fluid h-100">
      </div>
      <!-- 内容列，占8份宽度 -->
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="text-muted">actor</p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">Star Wars Saga</li>
            <li class="list-group-item">Indiana Jones</li>
            <li class="list-group-item">Blade Runner</li>
            <li class="list-group-item">Witness</li>
            <li class="list-group-item">Star Wars: The Force Awakens</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</a>

核心优化点： #

• 移除多余的嵌套card结构，避免布局冲突
• 用flex-row或row实现图片与内容的横向排列
• 固定图片区域宽度，防止内容被挤压
• 用a标签包裹卡片，直接实现跳转功能，无需额外JS
• 添加mb-3给卡片设置间距，提升页面美观度

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