Bootstrap：如何正确对齐按钮？

Question

下面jsFiddle中的按钮与标签垂直对齐。这看起来不太好，我希望它与选择框对齐。

我该怎么做？

jsFiddle

<div class="container">
  <form id="bookingForm" class="form-horizontal" method="post">
    <div class="form-group">
      <div class="col-sm-3">
        <label class="control-label">Sender</label>
        <select class="form-control">
          <option>Choose a sender</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Receiver</label>
        <select class="form-control">
          <option>Choose a receiver</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Delivery</label>
        <select class="form-control">
          <option>Choose a delivery address</option>
        </select>
      </div>
      <div class="col-sm-3">
        <button type="button" class="btn btn-primary">Manage customers...</button>
      </div>
    </div>
  </form>
</div>

Answer 1

如果可以避免，我个人不会添加保证金。纯粹是因为当你在不同的设备上查看它时，你可能需要删除所述边距。

我会添加一个＆＃34;空＆＃34;按钮上方的表格标签：

＆＃13;

＆＃13;

<div class="container">
  <form id="bookingForm" class="form-horizontal" method="post">
    <div class="form-group">
      <div class="col-sm-3">
        <label class="control-label">Sender</label>
        <select class="form-control">
          <option>Choose a sender</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Receiver</label>
        <select class="form-control">
          <option>Choose a receiver</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Delivery</label>
        <select class="form-control">
          <option>Choose a delivery address</option>
        </select>
      </div>
      <div class="col-sm-3">
      <label class="control-label" style="display: block;">&nbsp;</label>
        <button type="button" class="btn btn-primary">Manage customers...</button>
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox，我发现自己一遍又一遍地回到它有多好。

所以我们想要的是，如果按钮向下移动，那么它是在块的底部，而不是顶部。我们可以通过多种方式移动它，但它们都依赖于您获得像素数或百分比，这似乎需要付出很多努力。

这是flexbox'懒惰'解决方案

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  padding-top: 50px;
}
.form-group {
  display: flex;
}
.form-group .flex-down {
  align-self: flex-end;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container">
  <form id="bookingForm" class="form-horizontal" method="post">
    <div class="form-group">
      <div class="col-sm-3">
        <label class="control-label">Sender</label>
        <select class="form-control">
          <option>Choose a sender</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Receiver</label>
        <select class="form-control">
          <option>Choose a receiver</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Delivery</label>
        <select class="form-control">
          <option>Choose a delivery address</option>
        </select>
      </div>
      <div class="col-sm-3 flex-down">
        <button type="button" class="btn btn-primary">Manage customers...</button>
      </div>
    </div>
  </form>
</div>

希望您觉得这很有帮助。

我将此添加到CSS

.form-group { display: flex; } .form-group .flex-down { align-self: flex-end; }

和包含按钮的div的flex-down类。

Answer 3

按照@Andrew的说法做到这一点，

button{
  margin-top:25px;
}

Answer 4

在按钮上添加25px的上边距。

.btn-primary {
   margin-top: 25px;
}

Answer 5

您可以使用transform: translateY(75%);翻译Y位置。 Updated Fiddle

在CSS中添加以下代码：

button {
  transform: translateY(75%);
}

Answer 6

试试这个。

1. 在按钮上方添加一个带有空格（无内容）的标签标签
2. 内部按钮使用类form-control。
＆＃13;
＆＃13;
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
  padding-top: 50px;
}
＆＃13;
<div class="container">
  <form id="bookingForm" class="form-horizontal" method="post">
    <div class="form-group">
          <div class="col-sm-3">
        <label class="control-label">Sender</label>
        <select class="form-control">
          <option>Choose a sender</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Receiver</label>
        <select class="form-control">
          <option>Choose a receiver</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Delivery</label>
        <select class="form-control">
          <option>Choose a delivery address</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">&nbsp;</label>
        <button  type="button" class="btn btn-primary form-control">Manage customers...</button>
      </div>      
    </div>
    </form>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 7

我不会更改按钮边距，因为它会影响每个按钮。

如何添加不可见标签和按钮占用列的所有空间？我认为它在设备上也看起来更好。

见下面的例子： http://jsfiddle.net/Dhanck/fpurv0L9/7/

<div class="col-sm-3">
            <label style="visibility:hidden">das</label>
        <button type="button" class="btn btn-primary btn-group-justified">Manage customers...</button>
 </div>