布局表单输入引导

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>

注：查看全页模式的输出。