将追加对象添加到 Bootstrap 4 中的表单组输入字段

Question

我想附加form-group一些附加信息的输入字段。表单基于使用form-group标签的表单网格布局。我知道可以将 an 添加input-group-append到 aninput-group以便将某些内容附加到该字段。但我不知道如何将两者结合起来，在一个form-group领域有一个附录。

这是两个组件，具有网格结构的表单和附加的输入字段。

怎么可能，将附件（@example.com）添加到表单电子邮件输入中？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

Answer 1

我希望这有帮助

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
        <div class="input-group mb-3">
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon2">@example.com</span>
            </div>
        </div>
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>