html - Bootstrap 按钮与水平形式的文本输入不在同一行

Question

我试图将文本输入和按钮定位在同一行/行，但按钮不知何故上升，请参阅 screenshot .

代码:

<div class="row">
        <div class="col-md-8" ng-controller="OrdersController">
          <div class="well">
            <form role="form" class="form-horizontal">

              <div class="row">
                <div class="col-lg-8">
                  <label>Name</label>
                  <input type="text" class="form-control" placeholder="Enter patient">
                </div>
                <div class="col-lg-3">
                  <button type="button" class="btn btn-primary">Create new</button>
                </div>
              </div>

              <hr>
                <label>Private notes</label>
                <textarea  class="form-control" rows="3" placeholder="These notes are for your reference only."></textarea>

                <hr>
              <div class="col-md-4">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="submit" class="btn btn-primary">Open</button>
              </div>

            </form>
          </div>
        </div>
    </div>

您也可以在 plunker 上查看演示
那么，如何将它们放在同一条线上呢？

Answer 1

您也可以通过定位特定的 div 并设置顶部边距使其与其他元素对齐来实现这一点。

html

<button type="button" class="btn btn-primary inline-button">Create new</button>

CSS

    @media(min-width 768px){
  .inline-button{
    margin-top:24px;
  }
}