Блог

Я перепробовал все предложения здесь, даже используя эту ссылку Bootstrap horizontal-form . Но, похоже, ничего не работает. Я хочу попробовать просто изменить css, но на данный момент, в любом случае, это работает отлично. Я просто хочу, чтобы метка была в той же строке, что и ввод. Таким образом, в основном все входные данные и метки проходят через одну строку в одной строке. Сохраняя при этом контроль формы начальной загрузки

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="" class="row py-2  rowRecordBorder" data-toggle="tooltip" data-original-title="">
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Phone #</label>
    <input type="tel" id="t887" name="t887" onchange="buildTejPost('t887', 1);" value="100 100 1000" class="form-control" onfocus="$('#t887').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);" style="border-color: green;">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Fax #</label>
    <input type="tel" id="t888" name="t888" onchange="buildTejPost('t888', 1);" value="000 000 0000" class=" form-control" onfocus="$('#t888').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Pickup Time Open</label>
    <input type="text" id="t889" name="t889" onchange="buildTejPost('t889', 1);" value="9:00AM" class=" form-control" maxlength="128">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Pickup Time Close</label>
    <input type="text" id="t890" name="t890" onchange="buildTejPost('t890', 1);" value="3:00PM" class=" form-control" maxlength="128">
  </div>
</div>  

Самый быстрый способ поместить серию меток и элементов управления формой в одну горизонтальную строку — использовать .form-inline : https://getbootstrap.com/docs/4.5/components/forms/#inline-forms

 <div class="form-inline">
    <label />
    <input />
    <label />
    <input />
    <label />
    <input />
    <label />
    <input />
</div>
  

демонстрация: https://jsfiddle.net/davidliang2008/edy16zx5/12/

Или вы можете использовать сеточную систему для построения столбцов, каждый из которых содержит метку и ввод, точно так же, как вы настроили. Чтобы метка и ввод находились в одной строке в каждом столбце, хитрость заключается в том, чтобы столбец отображался также в виде гибкого поля:

 <div class="row">
    <div class="col-12 col-md-2 d-flex flex-row flex-nowrap align-items-center">
        <label />
        <input />
    </div>
    ...
</div>
  

Вы можете ссылаться на утилиты Flex здесь: https://getbootstrap.com/docs/4.5/utilities/flex /

• d-flex : отображение как flex, включает поведение flexbox
• flex-row : установите его направление на строку
• flex-nowrap : при переполнении вообще не переносится
• align-items-center : настройка выравнивания центра для элементов flex

демонстрация: https://jsfiddle.net/davidliang2008/edy16zx5/16/

В обоих случаях вам, как разработчику, нужно подумать о том, как разместить эти элементы ввода, особенно при ограниченном пространстве! Вы не можете просто ожидать, что Bootstrap автоматически обработает это за вас.