具有响应式堆叠的 Bootstrap 等高表单标签

Posted 2023-03-06

【中文标题】具有响应式堆叠的 Bootstrap 等高表单标签

【英文标题】：Bootstrap equal height form labels with responsive stacking

【发布时间】：2019-08-31 02:55:44

【问题描述】：

我的问题与这个问题非常相似： All labels with same height, on each row

基本上，就像前面的问题一样，我在几列中有几个表单元素（标签/输入对）。我的标签被翻译了，有时它们占用 1 行，有时占用 3 行。最后我希望这些标签具有相同的高度，以便输入字段都在同一水平线上。

问题中的一个答案建议将标签拆分为各自的行，将输入拆分为各自的行。问题是，当以移动屏幕尺寸查看时，这些项目会堆叠起来，看起来像：

label1
label2
label3
input1
input2
input3

这个答案建议和任意高度：https://***.com/a/36409948/811277

但是，如果我的标签占用更多的高度线，我认为它不会起作用。

我能想到的唯一另一件事是利用 javascript 计算最大高度，然后应用该高度。但是，我希望有某种 CSS/FlexBox/Bootstrap 解决方案在我朝那个方向前进之前我没有看到。

编辑：

我也在寻找这些元素在移动尺寸时堆叠。例如：

label1
input1

label2
input2

【问题讨论】：

显示具体代码。

这是原始问题的 jsfiddle：jsfiddle.net/4wwav7fs/1 我的情况完全相同，只是它必须适用于响应式/移动设备尺寸。

【参考方案1】：

+ 移动

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
 body 
    margin: 10px;



.row.flex 
    display: flex;
    align-items: flex-end;


@media (max-width: 767px) 
.row.flex .col-xs-6 
    width: 100%;

label 
    margin-top: 5px;

.row.flex 
    flex-flow: wrap;

<div class="container-fluid">
    <div class="row flex">
        <div class="col-xs-6">
            <label class="control-label" for="total_contribution_months">A very large and long label for an input A very large and long label for an input</label>
            <input id="total_contribution_months" class="form-control" type="text">
        </div>
        <div class="col-xs-6">
            <label class="control-label" for="age">Same height as left</label>
            <input id="age" class="form-control">
        </div>
    </div>
</div>

【讨论】：

这个答案看起来不错。不过，我希望在移动尺寸下，表单元素组可以堆叠在一起。我应该在最初的问题中指出这一点。

@Scott Dietrich 查看整页，调整窗口大小。