Как выровнять входные данные формы с разной длиной многострочных меток по горизонтали в bootstrap формах в разных браузерах? - PullRequest
Новая
       4

Как выровнять входные данные формы с разной длиной многострочных меток по горизонтали в bootstrap формах в разных браузерах?

0 голосов
/ 23 марта 2020

У меня есть два div в моей форме. Они могут иметь разную длину своих ярлыков. sh Чтобы выровнять как многострочные текстовые метки сверху, так и идентичные входные элементы div для выравнивания по центру друг с другом.

Пример jsfiddle можно найти ниже:

http://jsfiddle.net/ahujamoh/0v2fj4mc/

<div class="container">
<div class="row">
    <div class="form-group col-md-6">
        <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
        <input class="form-control" id="first">
    </div>
    <div class="form-group col-md-6">
        <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
        <input class="form-control" id="second">
    </div>
</div>


 .row {
    vertical-align: bottom;
}

.form-group .control-label{
    height:40px;
}

Фактически: верх текстовых меток выровнен, но поля ввода не выровнены по центру.

Actual output

Ожидается: верх текстовых меток выровнен, а поля ввода выровнены по центру.

Expected output

1 Ответ

2 голосов
/ 23 марта 2020

Я добавил класс inputdiv к каждому дочернему элементу div и преобразовал этого дочернего элемента в flexbox. 

 .row {
    vertical-align: bottom;
}


.inputdiv{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 30vh;
}

Я установил для свойства min-height значение 30vh , Не стесняйтесь поиграть с этим значением, пока вы будете sh. 

<div class="container">
    <div class="row">
        <div class="form-group col-md-6 inputdiv">
            <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-md-6 inputdiv">
            <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
            <input class="form-control" id="second">
        </div>
    </div>
</div>
...