Bootstrap 4 使用Bootstrap 4在具有图标的输入组中堆叠2个输入？

我使用的是Bootstrap3，我得到了这个结果（见图）。现在我正在升级到Bootstrap4，但我不知道如何使用Bootstrap4达到相同的效果

结果：

<form class="form form-signup" name="form_details" action="" method="post">
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
        </span>
        <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Last" value="" />
        <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Name" value="" />
    </div>
    <label id="error" class="valid error" for="lastname" generated="true">
</div>

---

使用flexbox实用程序类在输入组内垂直堆叠输入

          <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-user"></i>
                    </span>
                </div>
                <div class="d-flex flex-column border rounded-right flex-grow-1">
                    <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
                    <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
                </div>
          </div>

---

使用flexbox实用程序类在输入组内垂直堆叠输入

          <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-user"></i>
                    </span>
                </div>
                <div class="d-flex flex-column border rounded-right flex-grow-1">
                    <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
                    <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
                </div>
          </div>

---

在最新版本的Bootstrap（撰写本文时为4.3.1版）中，Zim的解决方案在不应该出现的情况下出现了新的变化。我用了这个：

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user"></i></span>
    </div>
    <div style="flex: 1 1 auto; width: 1%;">
        <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
        <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
    </div>
</div>

---

这使得append/prepend的工作方式与标准引导程序完全相同。当然，最好将样式添加到类中。

在最新版本的Bootstrap（撰写本文时为4.3.1版）中，Zim的解决方案在不应该的时候出现了新的变化。我用了这个：

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user"></i></span>
    </div>
    <div style="flex: 1 1 auto; width: 1%;">
        <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
        <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
    </div>
</div>

这使得append/prepend的工作方式与标准引导程序完全相同。当然，最好将样式添加到类中