Bootstrap - 垂直对齐输入字段

时间:2016-03-08 12:11:17

标签: css twitter-bootstrap

我正在使用一个使用Bootstrap 3的应用程序。在这个应用程序中,我有一行定义如下:

<div class="row" style="background-color:navy; color:white;">
  <div class="col-lg-3">
    <h2>Welcome</h2>
  </div>

  <div class="col-lg-8">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon">
            find:
          </div>
          <input type="search" class="form-control" id="queryField" />
        </div>
      </div>
    </form>                    
  </div>

  <div class="col-lg-1">
    <button type="button" class="btn btn-primary">Go</button>                    
  </div>
</div>

我想让搜索字段与Go按钮垂直对齐Welcome文字。 Welcome文本是垂直对齐的。我尝试添加vertical-align: middle。那没用。我试图避免使用填充。但如果需要,它是必需的。感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

所有

标签都有默认的边距,填充,所以放一个

的类
h2{ margin: 0;  padding: 0; }

并自动进入同一行