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

Question

我正在使用Bootstrap 3，并且得到了这个结果（参见图片）。现在我要升级到Bootstrap 4，但是我不知道如何使用Bootstrap 4达到相同的结果。

结果：

<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>

Answer 1

使用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>

https://www.codeply.com/go/rVedxTzrZv

Answer 2

在最新版的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>

这使得添加/添加与标准的Bootstrap完全一样。当然，最好将样式添加到类中。