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

如何在Bootstrap中的输入旁边放置按钮。如果我把一些CSS或随机引导类随机玩，我知道我得到这个工作，但我想知道一个很好的方法来做到这一点。我不想将按钮合并到input-group-btn do等文本字段中。我想要按钮的正常引导样式。如何将按钮放在输入Twitter Bootstrap 4旁边？

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

来源

2017-09-05 Diego Alves

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

来源

2017-09-05 12:55:15 ZimSystem

使用input-groups：

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>

来源

2017-09-05 11:56:27 fen1x

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

回答

相关问题