Question

如何在Bootstrap的输入旁边放置一个按钮。如果我随机添加一些CSS或者使用bootstrap类，我知道我可以使用它，但我想知道一个很好的方法来做到这一点。我不想将按钮合并到input-group-btn do这样的文本字段。我想要按钮的正常引导样式。

<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（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类......

最后，最简单的方法是简单地使用设置display:flex

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

使用input-groups：

＆＃13;

body {
  padding: 1rem;
}

＆＃13;

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

＆＃13;

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

2 个答案: