iPhone6に2つの要素を並べて表示する方法は？

Question

私はドロップダウン、検索ボックスと2つのボタンを含む行を持つ小さなブートストラップ4フォームを持っています。 iPhone 6でページを表示すると、[GO]ボタンが検索ボックスの下に表示されます。同じ行に検索ボタンと移動ボタンの両方を表示するにはどうすればよいですか？

Plnkrリンクはhttps://plnkr.co/edit/uJk6iE6NjBEXGcM2vhqT?p=previewあなたがこの

HTML試しドキュメントhere

を読むことができますinput groupについて

<div class="container"> 
     <form class="form-inline"> 
      <div class="row"> 
       <div class="col-md-3 hidden-md-down"> 
        <select class="custom-select"> 
         <option selected>Sort by</option> 
         <option value="1">First Name</option> 
         <option value="2">Last Name</option> 
         <option value="3">Salary</option> 
        </select> 
       </div> 
       <div class="col-md-6"> 
        <input class="form-control" type="text" data-action="grow" placeholder="Search"> 
        <button class="btn btn-primary" type="button"> 
         <span class="icon icon-magnifying-glass">GO</span> 
        </button> 
       </div> 
       <div class="col-md-3 hidden-md-down float-right"> 
        <button type="button" class="btn btn-pill btn-success">Add</button> 
       </div> 
      </div> 
     </form> 
    </div> 

Answer 1

もっとです：

<div class="input-group"> 
    <input class="form-control" type="text" data-action="grow" placeholder="Search"> 
    <span class="input-group-btn"> 
    <button class="btn btn-primary" type="button"> 
      <span class="icon icon-magnifying-glass">GO</span> 
     </button> 
    </span> 
</div>