如何在输入Twitter Bootstrap 4旁边放置按钮？

Question

如何在Bootstrap中的输入旁边放置按钮。如果我随机放一些CSS或使用bootstrap类，我知道我可以使用它，但是我想知道一种很好的方法。我不想像input-group-btn一样将按钮合并到文本字段。我想要按钮的常规引导样式。

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

我得到这个：

|input                    | //occupies the full width
(button) //button comes to bottom

我想要的是：

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

Answer 1

选项1 - form-inline类...

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

另外，您可以使用mr-1（向右空白）在输入和按钮之间添加少量空白：https : //www.codeply.com/go/5XCUJIEvua

选项2 - table-cell类...

另一个选择（如果您希望输入和按钮为全角）是使用d-table-cellclass。

<div class="d-table-cell w-100">
    <input class="form-control">
</div>
 <div class="d-table-cell align-middle">
    <button class="btn btn-primary">enter</button>
</div>

选择3 - d-flex类...

最后，最简单的方法可能是简单地使用d-flex display:flex

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

所有3个选项的演示：https :
//www.codeply.com/go/5XCUJIEvua

Answer 2

使用输入组：

body {
  padding: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Go!</button>
  </span>
</div>