如何用Bootstrap 5让最后一列铺满视口以横向排列卡片？

关键调整点 #

• 修复HTML语义问题：将无效的<li>标题替换为Bootstrap规范的卡片标题标签
• 让最后一列在中/大屏占据整行宽度，并启用flex布局实现卡片横向排列

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card mb-3">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="card mb-3">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4">
    <div class="card mb-3">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="card mb-3">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col-12 d-md-flex gap-3">
    <div class="card flex-grow-1">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="card flex-grow-1">
      <h5 class="card-title p-3">Just a placeholder title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>

核心类说明 #

• col-12：确保小屏设备下最后一列独占一行，保持堆叠布局
• d-md-flex：从md（中屏）开始启用flex布局，让列内卡片横向排列
• gap-3：控制卡片之间的间距，替代传统margin实现更整洁的布局
• flex-grow-1：让每个卡片自动平分容器宽度，保证横向排列时布局均匀
• card-title/card-body：使用Bootstrap内置的卡片样式类，提升布局一致性

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