如何在Bootstrap5中将Demo和GitHub按钮固定在卡片左下角

要实现按钮组固定在卡片左下角、不受文本内容长度影响的效果，直接用Bootstrap的flex布局类就能搞定，不用额外写复杂CSS，具体实现如下：

核心思路 #

把卡片内容容器设置为垂直方向的flex布局，通过自动margin或justify-content属性，让文本区域占据剩余空间，将按钮组推到容器底部，再设置按钮组靠左对齐。

完整代码示例 #

<div class="card" style="width: 18rem;">
  <img src="your-image-url" class="card-img-top" alt="Card image">
  <!-- 关键：给card-body添加d-flex flex-column -->
  <div class="card-body d-flex flex-column">
    <!-- 文本区域：用mb-auto让它占据上方所有剩余空间 -->
    <div class="mb-auto">
      <h5 class="card-title">项目名称</h5>
      <p class="card-text">这里可以放任意长度的文本内容，不管文本多短或多长，下方的按钮组都会固定在左下角</p>
    </div>
    <!-- 按钮组：align-self-start实现靠左对齐 -->
    <div class="btn-group align-self-start" role="group">
      <button type="button" class="btn btn-outline-primary">Demo</button>
      <button type="button" class="btn btn-outline-dark">GitHub</button>
    </div>
  </div>
</div>

类作用说明 #

• d-flex flex-column：将.card-body转为垂直方向的flex容器，内部元素按垂直顺序排列
• mb-auto：给文本容器设置自动底部margin，在flex垂直布局中，这个属性会让文本区域尽可能向上延伸，把按钮组挤到容器最底部
• align-self-start：强制按钮组在水平方向上靠左对齐（默认flex垂直容器的子元素会拉伸占满宽度，这个类可以覆盖默认行为）

备选方案（用justify-content） #

如果卡片内容只有文本区和按钮组两部分，也可以给.card-body加justify-content-between来实现同样效果：

<div class="card-body d-flex flex-column justify-content-between">
  <div>
    <h5 class="card-title">项目名称</h5>
    <p class="card-text">可变长度文本...</p>
  </div>
  <div class="btn-group align-self-start" role="group">
    <button type="button" class="btn btn-outline-primary">Demo</button>
    <button type="button" class="btn btn-outline-dark">GitHub</button>
  </div>
</div>

这两种方式都能避免按钮随文本内容移位，而且完全基于Bootstrap原生类，兼容性和响应式表现更好，比手动写绝对定位更可靠。

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