Bootstrap 5中如何将按钮移至右侧区域而非主内容区？

利用Bootstrap 5的原生网格系统和flex布局属性，无需自定义width或JavaScript就能实现需求，以下提供两种可靠方案：

方案一：拆分网格结构（推荐） #

通过拆分原有的布局结构，让按钮自然归入右侧区域，同时保证垂直对齐：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    Left part
  </div>
  <div class="col-6">
    <label>Input 1</label>
    <input type="text" class="form-control mb-3">
    <label>Input 2</label>
    <input type="text" class="form-control mb-3">
    <label>Input 3</label>
    <input type="text" class="form-control mb-3">
  </div>
  <div class="col-3">
    Right part
  </div>
</div>
<!-- 单独拆分特殊输入与按钮的行 -->
<div class="row align-items-end">
  <div class="col-3"></div>
  <div class="col-6">
    <label for="sim">Special input</label>
    <input class="form-control" type="text" name="sim">
  </div>
  <div class="col-3">
    <button type="button" class="btn btn-danger w-100">One button</button>
  </div>
</div>

关键调整说明 #

• 结构拆分：把原中间列内的「特殊输入+按钮」组抽成独立行，按钮自然进入右侧col-3，彻底抛弃width:138%这类兼容性差的hack。
• 垂直对齐：新行添加align-items-end类，让按钮与特殊输入框底部对齐，保证Y轴位置精准匹配。
• 样式精简：移除冗余的.full-width类（Bootstrap的form-control默认100%宽度），用mb-3统一输入框间距，优化视觉一致性。

方案二：绝对定位方案（保持原有整体结构） #

如果需要保持前三个输入与特殊输入在同一个容器内，可通过相对+绝对定位实现：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    Left part
  </div>
  <div class="col-6 position-relative">
    <label>Input 1</label>
    <input type="text" class="form-control mb-3">
    <label>Input 2</label>
    <input type="text" class="form-control mb-3">
    <label>Input 3</label>
    <input type="text" class="form-control mb-3">
    
    <label for="sim">Special input</label>
    <input class="form-control" type="text" name="sim">
    <!-- 绝对定位按钮到右侧区域 -->
    <button type="button" class="btn btn-danger position-absolute" style="right: -100%; bottom: 0; width: calc(100% - 1rem);">One button</button>
  </div>
  <div class="col-3">
    Right part
  </div>
</div>

定位方案说明 #

• 给中间col-6添加position-relative，作为按钮定位的参考容器。
• 按钮设置position-absolute，通过right: -100%将其完全移入右侧col-3区域（右侧列宽度与中间列比例为1:2，-100%刚好匹配宽度）。
• bottom: 0保证按钮与输入框底部对齐，width: calc(100% - 1rem)适配右侧列的内边距，避免溢出。

两种方案均基于Bootstrap 5原生样式，无JavaScript依赖，在不同浏览器和设备上表现一致。

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