我正在嘗試設計一個使用引導行和列的表單。我希望表單輸入上方的標簽都具有相同的高度，因此無論標簽有多少行，輸入都會對齊。我之所以不只是將每列的內容與底部對齊，是因為有時輸入下方會有一條訊息。我知道如何使所有列在一行中具有相同的高度，但是有沒有辦法使該列中的元素與其他列中的匹配元素具有相同的高度？我不能將標簽放在自己的行上，否則表單將不會回應。
這是我正在使用的示例
<div >
<div >
<div >
<label for="dropDown">Field Label</label>
<select id="dropDown" name="dropDown" >
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div >
<label for="textBox1" >Required Item - this is a sample of a longer title</label>
<input type="text" id="textBox1" name="textBox1" />
<span id="termsError" >Error</span>
</div>
<div >
<label for="textBox3">Numeric Input (disabled)</label>
<input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" >
<span id="termsError" >Warning</span>
</div>
<div >
<label for="textBox4">Date Picker</label>
<input type="date" id="textBox4" name="textBox4" />
<span id="termsError" >Info</span>
</div>
</div>
</div>
https://jsfiddle.net/bendorf_07/8nda4ujk/3/
uj5u.com熱心網友回復：
您可以通過使用 javascript 在標簽上添加高度來實作此目的。找到標簽的最大高度，并使它們都處于與最大高度相同的高度。
$(window).on("load resize",function(){
$('label').height(''); //Remove height first on resizing
var heights = $("label").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$("label").css("height", maxHeight);
});
https://jsfiddle.net/2qce68yv/
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/441771.html