如何设置Bootstrap 4固定定位Toast组件的宽度？

你遇到的问题是因为Bootstrap 4的.toast组件默认带有width: 350px的固定宽度样式，所以即使修改外层容器toastContainer的宽度，内部Toast元素依然会保持固定宽度，导致没有效果。以下是两种可行的解决方法：

方法一：直接内联修改Toast元素宽度 #

给.toast元素添加width样式，让它占满外层容器的宽度，配合容器的width:50%设置，就能实现Toast宽度为视口50%的效果：

<div class="container mt-5">
  <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button>
  <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; width: 50%; z-index: 9;">
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" style="width: 100%;">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <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">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

方法二：使用自定义CSS类（更规范） #

如果需要复用样式，建议在CSS中定义自定义类，避免内联样式的冗余：

/* 自定义Toast宽度样式 */
.custom-toast {
  width: 100%; /* 占满外层容器宽度 */
  max-width: 100%; /* 小屏幕下自适应，避免超出视口 */
}

然后给Toast元素添加这个类，同时确保外层容器的宽度设置正确：

<div class="container mt-5">
  <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button>
  <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; width: 50%; z-index: 9;">
    <div class="toast show custom-toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <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">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

额外说明 #

如果你想让Toast直接占据视口50%宽度，不需要依赖外层容器的宽度，可以直接给Toast设置视口单位：

.custom-toast {
  width: 50vw;
  max-width: 100%;
}

此时外层容器只需保留定位样式即可，不需要设置宽度。

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