Bootstrap：如何正确对齐按钮？

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

我该怎么做？

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

来源

2016-07-05 marlar

我不知道你的意思通过选择框对齐？如果你想添加一些'margin-top'来把它从选择框中取出。那么这应该很简单。 – Andrew

我真的希望应该有一个新的规则，关于完全相同的事情的多个答案。我删除了我的答案，因为我意识到它和其他人说的一样。如果只有其他人也可以这样做，那真的会整理一些东西。 – Lee

@Andrew：是的，我可以增加一个保证金，但是对于自举来说是新的，我不确定那是做这件事的“引导”方式。也许应该在我的问题中说过。 – marlar

尝试。

添加一个标签标记按钮上面的空间（没有内容）
内部按钮使用类形式控制。

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
body { 
 
    padding-top: 50px; 
 
}

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

来源

2016-07-05 11:00:59

你的代码是无效的，并且不需要表格控件 – Lee

如果我们不使用表格控件那个不工作的Lee。在删除表单控件后检查代码 –

“表单控件”对按钮的显示没有影响。这个类不意味着用于按钮。上面的标签应该是唯一需要添加的。就像我说的，你的代码是无效的......你在'form-control'后面有两组双引号' – Lee

做到这一点通过@Andrew如说，

button{ 
    margin-top:25px; 
}

来源

2016-07-05 10:55:45

25px的上边距添加到您的按钮。

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

来源

2016-07-05 10:57:21

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

添加下面的代码到你的CSS：

button { 
    transform: translateY(75%); 
}

来源

2016-07-05 10:58:35 Pugazh

我个人不会加边距，如果你能避免它。纯粹的事实是，当你在不同的设备上看它时，你可能需要删除所述边距。

我想补充的按钮上方的“空”的形式标签：

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

来源

2016-07-05 11:02:10 Birksy89

对不起，我没有看到第一个帖子就发布了我的答案，我会删除我的。没有必要再说两遍:) – Lee

我觉得我们很多人在同一秒钟都有同样的想法！ – Birksy89

交付输入和按钮之间没有空格 –

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

和类flex-down包含该按钮的股利。

来源

2016-07-05 11:10:12

谢谢你让我知道Flexbox的。这是一个非常有用的类/方法。 – marlar

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

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

见例如波纹管： 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>

来源

2016-07-05 12:22:26

Bootstrap：如何正确对齐按钮？

回答

相关问题