使列内的表单标签在同一行中具有相同的高度

Question

我正在尝试设置使用 bootstrap 行和列的表单的样式。我希望表单输入上方的标签都具有相同的高度，因此无论标签有多少行，输入都会排成一行。我之所以不只是将每列的内容对齐到底部，是因为有时输入下面会有一条消息。我知道如何使一行中的所有列具有相同的高度，但是有没有办法使该列内的元素与其他列中的匹配元素具有相同的高度？我不能将标签放在它们自己的行中，否则表格将无法响应。

这是我正在使用的示例

<div class="container">
  <div class="row">
    <div class="col-3">
      <label for="dropDown">Field Label</label>
      <select id="dropDown" name="dropDown" class="">
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-3">
      <label for="textBox1" class="required">Required Item - this is a sample of a longer title</label>
      <input type="text" id="textBox1" name="textBox1" class="" />
      <span id="termsError" class="error-box">Error</span>
    </div>
    <div class="col-3">
      <label for="textBox3">Numeric Input (disabled)</label>
      <input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" class="align-right">
      <span id="termsError" class="warning-box">Warning</span>
     </div>
    <div class="col-3">
      <label for="textBox4">Date Picker</label>
      <input type="date" id="textBox4" name="textBox4" class="" />
      <span id="termsError" class="info-box">Info</span>
    </div>
  </div> 
</div>

https://jsfiddle.net/bendorf_07/8nda4ujk/3/

Answer 1

您可以通过使用 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/

使列内的表单标签在同一行中具有相同的高度

Make form labels inside columns the same height in the same row

forms

label

bootstrap-5