Twitter bootstrap 如何把按钮旁边的输入推特引导4？

如何在引导中在输入旁边放置按钮。如果我随机放置一些css或使用引导类，我知道这是可行的，但我想知道一个好方法。我不想像输入组btn那样将按钮合并到文本字段。我想要按钮的正常引导样式

<div>
    <input class="form-control" /> <button class="btn btn-primary">enter</button>
</div>

我想要的是：

|input                   | (button) //same "line".

使用：

正文{
填充：1rem；
}

走！

选项1-

表单内联

类

<div class="form-inline">
    <input class="form-control">
    <button class="btn btn-primary">enter</button>
</div>

选项3-

d-flex

类

<div class="form-inline">
    <input class="form-control">
    <button class="btn btn-primary">enter</button>
</div>

最后，最简单的方法可能是简单地使用d-flex，它设置

display:flex

<div class="d-flex">
        <input class="form-control mr-1">
        <button class="btn btn-primary">enter</button>
</div>

进入

所有3个选项的演示：

<div class="d-flex">
        <input class="form-control mr-1">
        <button class="btn btn-primary">enter</button>
</div>