中间有一个前置元素的输入组？

Question

我想在两个输入元素之间添加一个前置元素。我可以用额外的 css 解决它，但这不是我想要的。

是否有仅使用bootstrap而没有额外 css代码的解决方案？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm m-4 w-50">
  <input class="form-control" type="text">
  <div class="input-group-prepend">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</div>

Answer 1

解决方法很简单。

只需使用这些类input-group-prepend并input-group-append一起使用。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm w-50 m-4">
  <input class="form-control" type="text">
  <div class="input-group-prepend input-group-append">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</div>