佈局表單輸入引導

Question

我有一個佈局引導的問題。我希望搜索按鈕保持在行尾。

這裏是我的代碼：

<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 

輸出：

我想這樣的佈局：

這又如何解決？

Answer 1

1）將搜索按鈕放入表單中。

2）如果您不想將搜索按鈕放到表單中，請嘗試下面的代碼。

只是，使內聯form。

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>

注：查看全頁模式的輸出。