防止 input-group-append 将相邻的 input-group 推到右侧

Posted 2023-03-06

【中文标题】防止 input-group-append 将相邻的 input-group 推到右侧

【英文标题】：Prevent input-group-append from pushing neighboring input-group on right

【发布时间】：2021-12-31 23:37:12

【问题描述】：

所以我有这个input-group 和一个input-group-append 按钮，可以在某些条件下呈现。但是，当我有两个相邻的 input 字段并为第一个渲染 input-group-append 时，此 button 将相邻的右侧 input 字段推到右侧，从而减小其宽度。这是我用于此示例的沙箱：code sample。如您所见，当我在Recipient's username 中输入内容时，它会呈现按钮并将Recipient's password 推到右侧。我想防止这种情况并在不对 input 字段本身进行任何修改的情况下呈现按钮。 Example without the code.

【参考方案1】：

您可以使用 Bootstrap's grid system 并将您的 2 个输入包装在 col 中的 row 中。您不需要自己更改输入字段，但需要为input-group div 添加一个额外的CSS 类，并添加一个带有row 类的包装器div。 html 将变为：

<div className="App">
  <div className="row">
    <div className="input-group col-6">
      <input ... />
      showAppend === true && (
        <div className="input-group-append">
          <span className="input-group-text" id="basic-addon2">
            @example.com
          </span>
        </div>
      )
    </div>
    
    <div className="input-group col-6">
      <input... />
      showAppendPassword === true && (
        <div className="input-group-append">
          <span className="input-group-text" id="basic-addon2">
            @example.com
          </span>
        </div>
      )
    </div>
  </div>
</div>

这使用网格系统并排呈现用户名和密码输入。我通过添加col-6（意味着它们都占总宽度的50%）来固定两个div 的宽度与input-group 类。这意味着，当 input-group-append 被渲染时，它将减小它所附加的输入的大小，而不是干扰其他输入：

没有input-group-append：

使用input-group-append：