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

Posted 2023-03-17

【中文标题】避免在 d-flex 或替代中重新定位元素

【英文标题】：Avoid repositioning elements in d-flex or alternative

【发布时间】：2022-01-04 02:17:18

【问题描述】：

我想线性添加元素，它们之间的间距相等。我可以使用我直接使用的 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 以外的选项也可以，

【参考方案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>

【讨论】：

我试过justify-content-between。开始和最后一个元素位置保持在其位置，但其他元素改变了它们的位置。这是image

当我将你的代码复制到一个空白的引导页面上时，它确实将所有内容都与justify-content-between 平分秋色。我想知道您是否在某处有一些详细的 CSS 可能会影响该位置？对于button 或这些btn btn-outline-primary btn-lg 中的任何一个，您是否有任何用于位置、边距或填充的CSS。当然，我只是有你的 html，没有影响它的 CSS。

我的 css 文件中什么都没有，只有我在上面共享的 html 和 js，除了 html、body 标签和默认的 bootstrap 5 css。将在干净的浏览器中再次测试并通知您

在你的原始代码公司justify-content-between

我试过justify-content-between，它正在工作。不知道为什么最初不是。