Bootstrap этикетки формы одинаковой высоты с адаптивным расположением
Мой вопрос очень похож на этот вопрос: Все метки одинаковой высоты в каждой строке
По сути, как и в предыдущем вопросе, у меня есть несколько элементов формы (пары метка/ввод) в нескольких столбцах. Мои метки переводятся, и иногда они занимают 1 строку, а иногда - 3. В конце концов, я хочу, чтобы эти метки были одинаковой высоты, чтобы все поля ввода находились на одной горизонтальной линии.
Один из ответов на вопрос предлагает разделить метки на отдельные строки, а входные данные — на отдельные строки. Проблема в том, что при просмотре на экранах мобильных устройств эти элементы будут складываться и выглядеть так:
label1
label2
label3
input1
input2
input3
Этот ответ предполагает и произвольную высоту: https://stackoverflow.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 См. всю страницу, измените размер окна.
Покажите конкретный код.