Bootstrap одинаковой высоты формы этикетки с отзывчивой укладкой - PullRequest
Новая
       20

Bootstrap одинаковой высоты формы этикетки с отзывчивой укладкой

2 голосов
/ 09 апреля 2019

Мой вопрос очень похож на этот вопрос: Все метки с одинаковой высотой в каждой строке

В принципе, как и в предыдущем вопросе, у меня есть несколько элементов формы (метка / вводпары) в пределах нескольких столбцов.Мои метки переводятся, и иногда они занимают 1 строку, а иногда - 3. В конце я хочу, чтобы эти метки были одинаковой высоты, чтобы поля ввода находились на одной горизонтальной линии.

Один из ответов на вопрос предлагает разделить метки на их собственную строку и входные данные на их собственную строку.Проблема в том, что при просмотре на экранах мобильных устройств эти элементы будут складываться и выглядеть следующим образом: 

label1
label2
label3
input1
input2
input3

Этот ответ предполагает произвольную высоту: https://stackoverflow.com/a/36409948/811277

Однако я неЯ думаю, что это сработает, если мои метки будут занимать больше строк высоты.

Единственное, о чем я могу думать, - это использовать JavaScript для вычисления максимальной высоты и затем применить эту высоту.Тем не менее, я надеялся, что есть какое-то решение CSS / FlexBox / Bootstrap, которое я не вижу, прежде чем идти в этом направлении.

Редактировать:

IЯ также смотрю, есть ли эти элементы стека, когда они мобильных размеровНапример: 

label1
input1

label2
input2

1 Ответ

2 голосов
/ 10 апреля 2019

+ мобильный 

/* 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>
...