如何将按钮与在引导程序中具有标签的文本框对齐

时间:2014-09-18 03:02:09

标签: html css twitter-bootstrap twitter-bootstrap-3

如何将按钮对齐到文本框?

<form accept-charset="UTF-8" action="/action" method="get">
  <div class="form-group">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <label for="from_date">From date</label>
        <input class="form-control" id="from_date" name="from_date" type="text">
        <p class="help-block">* Dates are inclusive</p>
      </div>
      <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <label for="to_date">To date</label>
        <input class="form-control" id="to_date" name="to_date" type="text">
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">        
        <input class="btn btn-primary" name="commit" type="submit" value="Go">
      </div>
    </div>
  </div>
</form>

enter image description here

2 个答案:

答案 0 :(得分:3)

在最后一个div中添加填充是一种解决方案。

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 toppadding">        
    <input class="btn btn-primary" name="commit" type="submit" value="Go">
  </div>

在css class add

.toppadding
{
    padding-top:23px;
}

选中此Demo

答案 1 :(得分:0)

标签是什么,它可以使用上面的解决方案或使用占位符完全删除标签:

<input class="form-control" name="to_date" type="text" placeholder="To Date">

http://jsfiddle.net/6y88u1ts/