如何实现Bootstrap按钮响应式布局：md右对齐xs全屏堆叠

首先修正你代码里的语法错误：.col-12>中多了一个多余的闭合符号>，应该改为.col-12。

利用Bootstrap 4的内置响应式工具类，无需额外自定义CSS就能实现需求，修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col-12">
        <div class="pt-2 d-flex flex-column flex-md-row justify-content-md-end">
            <button type="button" class="btn btn-primary w-100 mb-2 mb-md-0 mr-md-2">Primary</button>
            <button type="button" class="btn btn-secondary w-100">Secondary</button>
        </div>
    </div> 
</div>

关键类的作用说明： #

• d-flex flex-column flex-md-row：在xs（小屏幕，<768px）时使用垂直flex布局（按钮上下排列），md及以上屏幕（≥768px）切换为水平flex布局
• justify-content-md-end：仅在md及以上屏幕时让按钮容器右对齐
• w-100：让按钮在xs屏幕时铺满父容器宽度
• mb-2 mb-md-0：xs屏幕时给第一个按钮添加底部间距，md及以上屏幕取消该间距
• mr-md-2：仅在md及以上屏幕时给第一个按钮添加右侧间距，替代原代码中的<span class="mx-2">

如果你更倾向于使用自定义CSS来实现，代码如下：

自定义CSS：

/* xs断点（<768px）样式 */
@media (max-width: 767.98px) {
  .btn-responsive-container .btn {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
  }
  .btn-responsive-container .btn:last-child {
    margin-bottom: 0;
  }
}

/* md及以上断点（≥768px）样式 */
@media (min-width: 768px) {
  .btn-responsive-container {
    display: flex;
    justify-content: flex-end;
  }
  .btn-responsive-container .btn {
    width: auto;
    margin-left: 0.5rem;
  }
  .btn-responsive-container .btn:first-child {
    margin-left: 0;
  }
}

对应HTML结构：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col-12">
        <div class="pt-2 btn-responsive-container">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
        </div>
    </div> 
</div>

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