インラインフォーム

Question

私はとインラインブートストラップ4フォーム（入力とボタンの間にスペースを入れず）全幅を占有したい

機能していません：余分な小型デバイスで

• 1入力タイプテキストと1ボタンを
• 2入力型テキスト及び1小型機器のボタン
• 3入力型テキスト及び媒体において1つのボタンと大きいデバイス

しかし、以下のコードで動作していません。フォームが開いたり閉じたりする場所なので、私は知らない。 https://jsfiddle.net/o8jzq00f/1/

HTML：： https://jsfiddle.net：

<div class="container-fluid bg-success"> 

    <div class="row no-gutters justify-content-center" style="background-color: orange"> 
    <div class="col-xs-12"> 
     <h1 class="m-3">Title</h1> 
    </div> 
    </div> 

    <div class="row no-gutters justify-content-center"> 
    <form> 
     <div class="col-xs-10 col-sm-4 col-md-3"> 
     <label class="sr-only" for="inlineFormInput">Name</label> 
     <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe"> 
     </div> 
     <div class="col-sm-4 col-md-3 hidden-xs-up"> 
     <label class="sr-only" for="inlineFormInput">Name</label> 
     <input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe"> 
     </div> 
     <div class="col-sm-4 col-md-3 hidden-md-up"> 
     <label class="sr-only" for="inlineFormInput">Name</label> 
     <input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe"> 
     </div> 

     <div class="col-xs-2 col-sm-4 col-md-3"> 
     <button type="submit" class="btn btn-primary">Submit</button> 
     </div> 
     </div> 
    </form> 

</div> 

Answer 1

使用rowクラスあなたの列をバインドするために、それは私があなたのグリッドを固定 <div class="row">...under this you can use col classes and specify the width ...</div>