Twitterのブートストラップ4の入力の隣にボタンを置く方法は？

Question

ブートストラップの入力の隣にボタンを置く方法。ブートストラップクラスでランダムに私はいくつかのCSSや遊びをすると、私はこれを動作させることがわかっているが、私はこれを行う良い方法を知りたい。 input-group-btn doのようにボタンをテキストフィールドにマージしたくありません。私はボタンのための通常のブートストラップスタイルが欲しい。

|input     | //occupies the full width 
(button) //button comes to bottom 

は、私が欲しいもの：

<div> 
    <input class="form-control" /> <button class="btn btn-primary">enter</button> 
</div> 

私はこれを取得

|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を使用することができます。https://www.codeply.com/go/5XCUJIEvua

オプション2 - table-cellクラス...

もう1つのオプション（入力とボタンを全幅にしたい場合）電子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

<div class="d-flex"> 
     <input class="form-control mr-1"> 
     <button class="btn btn-primary">enter</button> 
</div> 

を設定し、D-フレックスを使用することであってもよい

デモすべての3つのオプションのうち、
https://www.codeply.com/go/5XCUJIEvua

Answer 2

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