如何避免Bootstrap 5 d-flex容器内修改按钮文本时其他元素发生位移

你当前使用justify-content-evenly实现等间距的逻辑是动态分配容器的剩余空白到每个元素的左右两侧，元素本身宽度由内容自适应，当第一个按钮文本变长、自身宽度变大后，容器总剩余空白减少，所有元素的左右空白都会被重新计算，因此出现整体偏移。
原布局示例：

修改文本后的偏移效果：

这里提供两种可直接在Bootstrap 5中实现的方案，均不需要修改你现有的JS逻辑：

方案1：基于现有Flex布局修改 #

给flex容器的每个子元素设置固定的宽度分配规则，让三个元素均分容器总宽度，各自的内容仅在自身分配到的宽度区域内展示，不会挤占其他元素的位置：

<div class="d-flex flex-column vh-100">
  <div class="row g-0">
    <div class="col-md-12">
      <div class="d-flex flex-column justify-content-center vh-100">
        <!-- 移除原有justify-content-evenly，子项加flex-fill均分宽度 -->
        <div class="d-flex align-items-baseline pt-3">
          <div class="flex-fill text-center">
            <button type="button" id="button1" class="btn btn-outline-primary btn-lg">Button 1</button>
          </div>
          <div class="flex-fill text-center">
            <button type="button" class="btn btn-outline-primary btn-lg">Button 2</button>
          </div>
          <div class="flex-fill d-flex justify-content-center">
            <input type="range" class="volume-range" min="1" max="5" step="1">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

补充说明： #

• 如果需要按钮左对齐，把text-center改成text-start即可
• 如果担心按钮文本过长超出容器，可给按钮添加text-truncate类实现超出省略

方案2：使用Grid布局（更简洁） #

CSS Grid天然适合固定列数的等分布局，不需要额外嵌套元素，直接通过工具类实现即可：

<div class="d-flex flex-column vh-100">
  <div class="row g-0">
    <div class="col-md-12">
      <div class="d-flex flex-column justify-content-center vh-100">
        <!-- 直接用grid分3等列，gap设置列间距 -->
        <div class="d-grid grid-cols-3 gap-4 align-items-baseline pt-3">
          <button type="button" id="button1" class="btn btn-outline-primary btn-lg mx-auto">Button 1</button>
          <button type="button" class="btn btn-outline-primary btn-lg mx-auto">Button 2</button>
          <input type="range" class="volume-range mx-auto" min="1" max="5" step="1">
        </div>
      </div>
    </div>
  </div>
</div>

效果说明 #

两种方案修改后，修改第一个按钮的文本长度时，仅按钮本身的内容区域变化，其余两个元素的位置完全固定，不会发生偏移。

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