Bootstrap 3按鈕/文本框垂直對齊，不帶標籤

使用引導3，如何垂直對齊並在底部沒有標籤時放置按鈕？Bootstrap 3按鈕/文本框垂直對齊，不帶標籤

像這樣的情況：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <label class="control-label">Field 1</label> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="col-xs-3 "> 
      <div class="text-center">     
       <button class="btn btn-primary">Swap!</button> 
      </div> 
     </div> 
     <div class="col-xs-3"> 
      <label class="control-label">Field 2</label> 
      <input type="text" class="form-control"> 
     </div> 
    </div> 
</div>

我主要使用三種解決方案：

使用2行（一個用於標籤和一個文本框和按鈕）像https://jsfiddle.net/luancaius/7ygoys11/。此解決方案無法響應，並會產生一些佈局問題。
在中間欄使用margin-top。也有響應的問題。
使用非破壞空間的標籤可以解決問題，但看起來不太好。這是我目前的解決方案。 https://jsfiddle.net/luancaius/mr5wLoxf/

有沒有人有更好的方法來解決這個問題？或者我在做佈局結構錯誤？

謝謝！

來源

2017-04-04 Luan Caius

您的第一個解決方案似乎適合用途。那麼它怎麼迴應，你有什麼樣的佈局問題呢？ –

如果您調整佈局大小，則應該在字段和單個字段之上標註標籤。使用第一種解決方案，您可以將所有標籤（第一行）和字段（第二行）組合在一起。有沒有辦法在jsfiddle中顯示這個？ –

我玩過你的第一個解決方案，它似乎正在做你的要求。無論您製作視口的範圍有多寬，標籤都位於按鈕和輸入上方的自己的行上。就垂直一致而言，我沒有看到這個問題。也許我誤解了你的問題 –

你可以嘗試用垂直對齊排列：

.col-xs-3 {display:inline-block; vertical-align:bottom; float:none;}

只要確保有在各山坳-XS-3的div的HTML沒有空格。或者使用註釋來劃分他們，就像這樣：

<div>...</div><!-- space --><div>...</div>

https://jsfiddle.net/yw0a6689/

UPDATE：而是做這行每列的，你可以做到這一點通常是這樣的：

.container > .row > div {display:inline-block; vertical-align:bottom; float:none;}

或者更具體地說，通過給該行添加一個類似.myrow的類，然後聲明：

.myrow > div {display:inline-block; vertical-align:bottom; float:none;}

來源

2017-04-04 19:16:48

但我需要爲每種類型的引導列做這個。像col-xs-1，col-xs-2，col-sm-3 ...？ –

我更新了答案 –

Bootstrap 3按鈕/文本框垂直對齊，不帶標籤

回答

相關問題