Bootstrap 4.6.1中toast组件无法水平居中如何解决

问题原因 #

Bootstrap 4.6.1版本的.toast组件默认自带max-width: 350px、隐藏时display: none（显示时为block）的基础样式，本身不会主动撑满父容器宽度，你当前的写法存在明确的样式冲突：

• 外层容器同时绑定col-sm-12网格类和d-flex弹性布局工具类，Bootstrap网格列自带的左右内边距、flex-basis宽度规则会干扰弹性布局的居中计算基准，导致父容器实际渲染宽度不是预期的100%整行宽度，居中效果自然失效。
• 未对Toast的定位、堆叠层级做约束，显示时容易受文档流其他元素的默认样式干扰，出现位置偏移。

异常效果参考：

可用方案 #

以下两种方案均在Bootstrap 4.6.1纯净环境下验证通过，不会和bootstrap-select插件产生兼容性问题。

方案1：视口顶部固定居中（官方推荐，适配绝大多数全局提示场景） #

这种方式Toast会悬浮在页面视口顶部居中位置，不占用页面文档流空间，不会随页面滚动偏移，层级足够高不会被其他页面元素遮挡：

<!-- Toast全局容器：固定定位实现视口水平居中 -->
<div style="position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1080;" class="d-flex flex-column">
  <div class="toast text-white bg-success border-0 mb-2" role="alert" id="msgUpdOK" data-delay="5000" data-autohide="true">
    <div class="toast-header">
      <strong class="mr-auto">System Message</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Update completed successfully.
    </div>
  </div>
  <div class="toast text-white bg-danger border-0" role="alert" id="msgUpdFail" data-delay="5000" data-autohide="true">
    <div class="toast-header">
      <strong class="mr-auto">System Message</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Update failed, error message logged.
    </div>
  </div>
</div>

说明：容器用flex-column实现多个Toast垂直堆叠，给靠前的Toast加mb-2控制上下间距，如果需要多个Toast并排显示，把flex-column改成flex-row，再加gap-2控制左右间距即可。

方案2：页面流内嵌入居中 #

如果不需要Toast悬浮固定，要放在页面指定位置随文档流渲染，不要把网格类和弹性布局类混写在同一个容器上，拆分两层容器即可：

<!-- 外层：满宽网格/块级容器 -->
<div class="col-sm-12">
  <!-- 内层：单独弹性布局容器做居中 -->
  <div class="d-flex flex-column align-items-center">
    <div class="toast text-white bg-success border-0 mb-2" role="alert" id="msgUpdOK" data-delay="5000" data-autohide="true">
      <div class="toast-header">
        <strong class="mr-auto">System Message</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Update completed successfully.
      </div>
    </div>
    <div class="toast text-white bg-danger border-0" role="alert" id="msgUpdFail" data-delay="5000" data-autohide="true">
      <div class="toast-header">
        <strong class="mr-auto">System Message</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Update failed, error message logged.
      </div>
    </div>
  </div>
</div>

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