底部对齐按钮Bootstrap

时间:2014-11-21 03:22:23

标签: twitter-bootstrap-3

是否有一个帮助程序类,我可以使用它来对齐下面的“搜索”按钮。我正在使用Boostrap 3.2。

<div class="input-group col-md-2">
  <label for="FirstName">First Name</label>
  <input class="form-control" id="FirstName" maxlength="10" name="FirstName" placeholder="First Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
  <label for="LastName">Last Name</label>
  <input class="form-control" id="LastName" maxlength="10" name="LastName" placeholder="Last Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
  <label for="RecordNo">Record No</label>
  <input class="form-control" id="RecordNo" maxlength="6" name="RecordNo" placeholder="Record No" type="text" value="" />
</div>

<div class="input-group col-md-3">
  <label for="Department">Department</label>
  <select id="Department" class="form-control">
    <option value="">CHOOSE DEPARTMENT</option>
  </select>
</div>
<div class="col-md-3 input-group">
  <button id="Search" class="btn btn btn-success pull-right">
    Search &nbsp;<span class="glyphicon glyphicon-search"></span>
  </button>
</div>

enter image description here

2 个答案:

答案 0 :(得分:0)

 .col-lg-4, .col-lg-8     
 { 

float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
 }

或使用此

       .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
          }

答案 1 :(得分:0)

默认情况下,引导程序列为position relative,因此只需使用以下按钮即可定位按钮:

button{
    position:absolute;
    bottom:0
}