如何用CSS实现Bootstrap 4中两个对齐按钮的响应式布局

方案1：用Bootstrap 4自带响应式类（推荐，无需手写CSS） #

Bootstrap本身提供了适配不同屏幕的flex工具类，直接用这些类就能实现需求，不用自己写媒体查询：

<div class="d-flex flex-column flex-md-row">
  <button class="btn btn-primary mr-md-2 mb-2 mb-md-0">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
</div>

• d-flex：把容器设为flex布局
• flex-column：默认（屏幕<768px时）按钮垂直排列
• flex-md-row：屏幕≥768px时，按钮改为水平排列
• mr-md-2：大屏时给第一个按钮加右侧间距
• mb-2 mb-md-0：小屏时给按钮加底部间距，大屏时取消底部间距

方案2：自定义媒体查询（如果必须手写CSS） #

如果之前写的@media没生效，大概率是断点值不对或者选择器优先级不够。Bootstrap的md断点是768px，小屏要写max-width:767.98px（避免和框架断点冲突）：

/* 给按钮容器加专属类，比如button-group-wrap */
@media (max-width: 767.98px) {
  .button-group-wrap {
    display: flex;
    flex-direction: column;
  }
  .button-group-wrap .btn {
    margin-bottom: 10px;
  }
  .button-group-wrap .btn:last-child {
    margin-bottom: 0; /* 去掉最后一个按钮的底部间距 */
  }
}

对应的HTML：

<div class="button-group-wrap d-flex">
  <button class="btn btn-primary mr-2">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
</div>

常见排查点 #

• 确认已经正确引入Bootstrap 4的CSS文件，否则响应式类不会生效
• 检查之前的CSS有没有用!important强制覆盖样式，尽量避免使用这个属性
• 核对媒体查询的语法，确保括号、大括号没有遗漏

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