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

【问题标题】：Prevent input-group-append from pushing neighboring input-group on right防止 input-group-append 将相邻的 input-group 推到右侧
【发布时间】：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.

【问题讨论】：

标签： css reactjs bootstrap-4 react-bootstrap

【解决方案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：

【讨论】：