html - `<fieldset>` 中的 Font Awesome ，带有 Bootstrap 4 种形式

Question

对于 bootstrap 4 中的单输入表单，放置超赞字体图标的一个好方法是 input-group-addon类:

<div class="input-group">
    <span class="input-group-addon">
        <i class="fa fa-envelope"></i>
    </span>
    <input class="form-control" type="text" placeholder="Email address">
</div>

呈现如下:

但是，对于多部分形式，bootstrap 4 似乎隐含地建议使用 <fieldset>标记，但这个成语的自然扩展不起作用:

<form action="" method="POST">
    <fieldset class="form-group">
        <span class="input-group-addon">
            <i class="fa fa-envelope"></i>
        </span>
        <input class="form-control" type="text" placeholder="Email address">
    </fieldset>
</form>

它在顶部呈现图标:

有没有办法在不编写自定义 css 的情况下将图标设置到字段的左侧？

Answer 1

尝试将您的 form-group 类更改为 input-group:

<form action="" method="POST">
    <fieldset class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-envelope"></i>
        </span>
        <input class="form-control" type="text" placeholder="Email address">
    </fieldset>
</form>