Как выровнять два входа рядом в строке Bootsrap?

Question

Два входа смещены из-за разницы в длине текста надписи. Ниже приведена часть моего кода:

<div class="row">
    <div class="col-auto col-md-6 form-group">
         <label for="category">Which of the following best describes you?</label>
         <select class="form-control" id="category" name="category">
             <option>Furniture Designer</option>
             <option>Architect</option>
         </select>
    </div>

    <div class="col-auto col-md-6 form-group">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

</div>

Как я могу легко исправить несоосность и сохранить адаптивную форму?

Answer 1

Вы можете сделать form-group d-flex flex-column и затем использовать mt-auto на входе формы для принудительного выравнивания дна ...

<div class="row">
    <div class="col-auto col-md-6 form-group d-flex flex-column">
        <label for="category">Which of the following best describes you?</label>
        <select class="form-control mt-auto" id="category" name="category">
            <option>Furniture Designer</option>
            <option>Architect</option>
        </select>
    </div>
    <div class="col-auto col-md-6 form-group d-flex flex-column">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
    </div>
</div>

https://codeply.com/p/S9wKwrKLch

ИЛИ, используйте класс text-truncate на этикетках, чтобы предотвратить перенос текста:

<label for="category" class="text-truncate">
   Which of the following best describes you?
</label>

https://codeply.com/p/S9wKwrKLch

Answer 2

Если вы хотите обработать его небольшим фрагментом кода, я надеюсь, что он вам пригодится:

Вы можете использовать равные нижние границы для обоих входов, а также если вы хотите использовать bootstrap, например, вы можете добавить mb-2 класс для ваших входов.

Или даже вы можете использовать mt-auto для ваших входов .

Answer 3

Поведение по умолчанию в bootstrap 4 заключается в том, что над входом появится метка. (Конечно, с кодом, который у вас есть выше.)

Если вы хотите, чтобы метка находилась рядом со входом, попробуйте это прямо из документации bs4:

    <form>
       <div class="form-group row">
          <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
             <input type="password" class="form-control" id="inputPassword">
          </div>
       </div>
    </form>

Bootstrap 4 документа

Answer 4

попробуйте таким образом

<div class="col-auto d-md-flex flex-md-column col-md-6 form-group">
        <label class="flex-md-fill" for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

https://jsfiddle.net/lalji1051/t41Lnuxh/5/