Layout Formular Eingabe Bootstrap

Question

Ich habe ein Problem mit Layout-Bootstrap. Ich möchte, dass der Suchknopf am Ende der Zeile bleibt.

Hier ist mein Code:

<form id="frmTest" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/> 
    </div> 
    <div class="form-group"> 
     <div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
      <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)"> 
      <span class="input-group-btn"> 
      <button class="btn default" type="button"> 
      <i class="fa fa-calendar"></i> 
      </button> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
      <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)"> 
      <span class="input-group-btn"> 
      <button class="btn default" type="button"> 
      <i class="fa fa-calendar"></i> 
      </button> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button> 
    </div> 
</form> 
    <button class="btn btn-warning " id="btn-search">Search</button> //this not part form input 

Ausgang:

ich das Layout wie diese wollen:

Wie kann dieses Problem gelöst?

Answer 1

1) Setzen Sie den Suchknopf in das Formular.

2) Wenn Sie die Suchschaltfläche nicht in das Formular einfügen möchten, versuchen Sie den folgenden Code.

Just, machen Sie die form Inline.

form { 
 
    display: inline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form id="frmTest" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" /> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
 
     <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)"> 
 
     <span class="input-group-btn"> 
 
      <button class="btn default" type="button"> 
 
      <i class="fa fa-calendar"></i> 
 
      </button> 
 
      </span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
 
     <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)"> 
 
     <span class="input-group-btn"> 
 
      <button class="btn default" type="button"> 
 
      <i class="fa fa-calendar"></i> 
 
      </button> 
 
      </span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button> 
 

 
    </div> 
 
</form> 
 
<button class="btn btn-warning " id="btn-search">Search</button>

Hinweis: Ansicht der Ausgang in voller Seitenmodus.