Bootstrap 5中按钮超出父容器，该如何解决？

你的问题核心出在按钮外层的row类上——Bootstrap的row自带左右负margin（用来抵消容器padding，实现列间间距），但单独用它包裹d-grid和按钮时，会导致按钮宽度超出父容器边界。

解决办法（三种可选） #

1. 移除按钮外层的row类（推荐）

直接用d-grid包裹按钮即可，row是配合col类做栅格布局的，这里不需要栅格列，d-grid本身就能让按钮占满容器宽度：

<div class="form-container text-center">
  <form>
    <div class="row my-4">
      <input
        type="email"
        class="form-control form-control-lg rounded-5"
        placeholder="Email Address"
      />
    </div>
    <!-- 移除row，保留d-grid -->
    <div class="d-grid">
      <button class="btn btn-primary btn-lg text-white">Click Here</button>
    </div>
  </form>
</div>

2. 保留row但添加g-0消除间距

如果一定要保留row，给它加上g-0类，消除row的负margin，避免按钮溢出：

<div class="row d-grid g-0">
  <button class="btn btn-primary btn-lg text-white">Click Here</button>
</div>

3. 调整父容器padding抵消负margin

给form-container添加px-0，抵消row的负margin影响，但这种方式不如前两种优雅，可能影响其他元素布局：

<div class="form-container text-center px-0">
  <!-- 原form内容 -->
</div>

原理说明 #

Bootstrap的row类默认设置了margin-left: -$gutter-x/2和margin-right: -$gutter-x/2（默认$gutter-x为24px，左右各-12px），不用col包裹内容时，这个负margin会让内部元素超出父容器宽度。d-grid的作用是创建网格布局，让子元素自动填充可用空间，去掉多余的row就能解决溢出问题。

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