Bootstrap 4实现Div底部按钮左右对齐的代码问询

嘿，我帮你梳理出了完美的实现方案！要在Bootstrap 4的row里搞定两个左对齐、一个右对齐的按钮，还得让它们牢牢钉在Div底部，结合Bootstrap的flex布局类和你现有的CSS就能轻松实现，往下看：

完整代码示例 #

HTML 结构 #

<!-- 假设这是你要放置按钮的底部容器 -->
<div class="footer">
  <div class="container h-100 d-flex flex-column">
    <!-- 如果容器内有其他内容，放在这里 -->
    <div class="row mt-auto d-flex align-items-center">
      <!-- 两个左对齐按钮 -->
      <div>
        <button class="btn btn-primary mr-2">左按钮1</button>
        <button class="btn btn-secondary">左按钮2</button>
      </div>
      <!-- 右对齐按钮，用ml-auto推到右侧 -->
      <div class="ml-auto">
        <button class="btn btn-success">右按钮</button>
      </div>
    </div>
  </div>
</div>

CSS 样式（结合你的现有代码调整） #

html {
  position: relative;
  min-height: 100%;
}
body {
  /* 底部留白高度和footer一致，避免内容被footer遮挡 */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
  /* 用flex垂直居中按钮，替代原来的line-height（避免按钮高度变化时错位） */
  display: flex;
  align-items: center;
}
.fa-arrows-alt {
  color: rgb(231, 81, 37);
  cursor: pointer;
}

关键细节说明 #

1. 底部对齐核心：给包裹row的容器加上 d-flex flex-column h-100，让它占满footer的高度，再给row加上 mt-auto，这个类会自动把row推到容器的最底部，完美实现按钮在Div底部的需求。
2. 按钮对齐技巧：
   • 把两个左按钮放在同一个div里，保持它们的并排关系；
   • 给右按钮的容器加上 ml-auto（margin-left:auto），利用flex布局的特性，自动把这个容器推到row的最右侧，实现右对齐。
3. 垂直居中优化：把footer的 line-height:60px 换成 display:flex; align-items:center;，这样不管按钮的高度怎么调整，都能保持垂直居中，比line-height的兼容性更好。

如果你需要在非footer的普通Div里实现同样效果，只需要把那个Div设置成 position:relative;，并给它一个固定高度，然后按照上面的flex布局逻辑来嵌套即可。

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