如何将按钮放在输入框旁边，使用 Twitter Bootstrap 4？

Question

如何在Bootstrap中将按钮放置在输入框旁边。如果我随意添加一些CSS或玩弄Bootstrap类，我知道可以使其正常工作，但我想知道一个好的方法来实现这一点。我不想像input-group-btn一样将按钮合并到文本字段中。我想使用普通的Bootstrap样式来设置按钮。

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

- Diego Alves

Answer 1

选项1 - form-inline类...

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

此外，你可以使用mr-1（margin-right）在输入框和按钮之间添加小的边距：https://www.codeply.com/go/5XCUJIEvua

选项2 - table-cell类...

另一个选择（如果你想让输入框和按钮全宽）是使用d-table-cell类..

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

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

- Zim

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>

- fen1x