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

Question

我希望在两个输入元素之间有一个prepend元素。我可以用额外的css来解决它，但这不是我想要的。

有没有一个解决方案只使用引导程序，而没有额外的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>