如何將按鈕放在輸入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旁邊？

回答

相關問題