嘿，这个场景我太熟了！其实不用费劲写太多自定义样式，Bootstrap本身的布局类就能完美解决，给你两个最实用的方案：

方案1：用Flex布局（最推荐） #

给每行的容器加上d-flex justify-content-between w-100这几个类，d-flex把容器变成flex布局，justify-content-between会让两个按钮分别贴住左右两端，w-100确保容器占满整行宽度。就算左侧按钮加d-none隐藏，右侧按钮也会稳稳待在右边，因为flex布局会自动分配剩余空间。

示例代码：

<!-- 正常显示左右按钮的行 -->
<div class="d-flex justify-content-between w-100 mb-3">
  <button class="btn btn-primary">左侧操作按钮</button>
  <button class="btn btn-secondary">右侧操作按钮</button>
</div>

<!-- 隐藏左侧按钮的行 -->
<div class="d-flex justify-content-between w-100 mb-3">
  <button class="btn btn-primary d-none">左侧操作按钮</button>
  <button class="btn btn-secondary">右侧操作按钮</button>
</div>

方案2：用自动Margin（更灵活） #

如果不想用flex布局，给右侧按钮加上ms-auto类（Bootstrap 5+的写法，Bootstrap 4是ml-auto），这个类会给按钮加上margin-left: auto，不管左边有没有元素，它都会自动推到容器的最右侧。记得给外层容器加个块级的宽度，比如w-100。

示例代码：

<!-- 正常行 -->
<div class="w-100 mb-3">
  <button class="btn btn-primary">左侧操作按钮</button>
  <button class="btn btn-secondary ms-auto">右侧操作按钮</button>
</div>

<!-- 隐藏左侧按钮的行 -->
<div class="w-100 mb-3">
  <button class="btn btn-primary d-none">左侧操作按钮</button>
  <button class="btn btn-secondary ms-auto">右侧操作按钮</button>
</div>

为什么之前的方法不行？ #

你之前遇到的问题，本质是普通的行内/块级元素在左侧元素隐藏后，会自动填补空缺位置。而上面两种方法都是利用了CSS的自动margin或者flex布局的空间分配特性，强制右侧元素保持在容器的右端位置，完全不用写复杂的自定义样式～

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