Bootstrap表單內嵌上面的標籤，位置按鈕

我試圖在輸入上方使用帶有標籤的內聯表單。該行末尾有一個按鈕，我怎樣才能將按鈕對齊輸入的底部？（請注意，我不想使用form-inline類，因爲我想在上面輸入標籤）Bootstrap表單內嵌上面的標籤，位置按鈕

<div class="col-xs-4"> 
    <label>Input 1</label> 
    <input type="text" class="form-control"> 
</div> 
<div class="col-xs-4"> 
    <label>Input 2</label> 
    <input type="text" class="form-control"> 
</div> 
<div class="col-xs-4"> 
    <button class="btn btn-primary btn-sm"> 
    Save 
    </button> 
</div>

我嘗試添加絕對定位

button { 
    position: absolute; 
    bottom: 0; 
}

這裏是一個jsfiddle

來源

2016-08-02 user2954587

錯字錯誤。它不是底部，而是底部。 –

@Leroideion很好的捕獲，但仍然沒有解決問題 – user2954587

所以你想把按鈕的頂部觸摸最後輸入的底部？「將按鈕對齊輸入底部是什麼意思？」 – Zack

~~你可以使用另一個div和class="row"以下。我修改你的jsfiddle顯示它~~

編輯：對不起，我起初誤會這裏是我的兩個解決方案：第一個是增加沿着label與按鈕有一定的存文本（尺寸爲計算目的），然後設置該標籤的visibility與hidden。這是一個jsfiddle，顯示了一個例子。這有一個缺點，就是無法用其他類指令很容易地解決這個問題。

其次與您的解決方案類似，但通過手動設置修復div高度爲0px，並再次以響應方式混亂。 jsfiddle-2

來源

2016-08-02 13:24:51 Fma

然後按鈕將在一個新的行，這不是我想要的 – user2954587

@Fma這不能解決他的問題。他希望在一行中有2個輸入的按鈕不在額外的行 – DestinatioN

不工作的解決方案。 –

從按鈕上刪除position:absolute和bottom:0。您需要覆蓋最後一列中爲錯過的標籤保留的空間。添加margin-top: 28px insetad。

來源

2016-08-02 13:54:54

與按鈕列不具有相同的高度與其他列：

如前所述，你可以這樣做：

.row .btn { 
    margin-top: 5px; 
}

我不是巨大的風扇來作出這樣的修正...你可以使用CSS flexbox與Bootstrap使行內的列具有相同的高度，只需創建一個類：

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
}

然後用<div class="row row-eq-height">代替<div class="row">。

而且你可以定義爲你所提到的按鈕的位置：

.row .btn { 
    position: absolute; 
    bottom: 0; 
}

Live Example in CodePen

來源：Official experimental example of same-height columns using CSS flexbox

來源

2016-08-02 14:22:06 ocordova

的想法是去除absolute定位和利用的form-control-static類。不幸的是，爲了對齊它，我使用了一個空標籤，這可能不是最乾淨的解決方案。

檢查下面的代碼：

body { 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <label>Input 1</label> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <label>Input 2</label> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <label></label> 
 
     <div class="form-control-static"> 
 
     <button class="btn btn-primary btn-sm"> 
 
      Save 
 
     </button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2016-08-02 14:29:21

Bootstrap表單內嵌上面的標籤，位置按鈕

回答

相關問題