避免在 d-flex 或替代中重新定位元素

Question

我想线性添加元素，它们之间的间距相等。我可以使用我直接使用的 Bootstrap 5 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">
        <div class="d-flex justify-content-evenly align-items-baseline pt-3">
          <button type="button" id="button1" class="btn btn-outline-primary btn-lg">Button 1</button>
          <button type="button" class="btn btn-outline-primary btn-lg">Button 2</button>
          <input type="range" class="volume-range" min="1" max="5" step="1">
        </div>
      </div>
    </div>
  </div>
</div>

var buttonTextChanged = false;
var button1 = document.getElementById('button1');
button1.addEventListener("click", function(event) {
  if (!buttonTextChanged) {
    button1.innerText = "Some large text";
    buttonTextChanged = true;
  } else {
    button1.innerText = "Button 1";
    buttonTextChanged = false;
  }
});

与图片一样，虽然它们是等距的，但它们会在文本大小更改后重新定位。如何对齐轴，增加文本大小但其他项目的位置不应该改变？

d-flex 以外的选项也可以，

Answer 1

在该列中尝试justify-content-between 而不是justify-content-evenly。

<div class="d-flex justify-content-between align-items-baseline pt-3">
  <button type="button" id="button1" class="btn btn-outline-primary btn-lg">Button 1</button>
  <button type="button" class="btn btn-outline-primary btn-lg">Button </button>
  <input type="range" class="volume-range" min="1" max="5" step="1">
</div>