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;
  }
}

Answer 2

为.form-inline添加<form>左对齐和内联块控件。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="">Email address</label>
    <input type="email" class="form-control" id="" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

参见 - ＆gt; http://getbootstrap.com/css/#forms-inline

Bootstrap按钮不在同一行，文本输入为水平形式

2 个答案: