input-group 、input-group-prepend、input-group-append的使用

283 阅读1分钟

我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。

最后,我们还需要使用 .input-group-text 类来设置文本的样式。

<form> <div class="input-group mb-3"> 
<div class="input-group-prepend">
    <span class="input-group-text">@</span> 
</div> 
    <input type="text" class="form-control" placeholder="Username"> 
</div>
<div class="input-group mb-3"> 
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append"> 
        <span class="input-group-text">@runoob.com</span> 
    </div>
</div>
</form>

image.png

参考: www.runoob.com/bootstrap4/…