twitter-bootstrap – 如何在输入Twitter Bootstrap 4旁边放置按

发布时间：2020-12-17 21:21:04 所属栏目：安全来源：网络整理

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

如何在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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!