如何在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".
解决方法
选项1 – 表格内联类……
<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 – 表格类…
另一个选项(如果你想输入和按钮是全宽)是使用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>