Wie können zwei Elemente in iPhone6 ​​nebeneinander angezeigt werden?

Question

Ich habe ein kleines Bootstrap 4 Formular mit einer Zeile mit Dropdown, Suchfeld und zwei Schaltflächen. Wenn ich die Seite in iPhone 6 betrachte, sehe ich, dass die GO-Schaltfläche unter das Suchfeld geht. Wie kann ich den Such- und den GO-Button in derselben Zeile haben?

Der Plnkr Link ist https://plnkr.co/edit/uJk6iE6NjBEXGcM2vhqT?p=preview

<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

Mehr über input group Sie Dokumentation here

Versuchen Sie, diese

HTML lesen können:

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