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：如何正確對齊按鈕？

回答

相關問題