Как можно сделать ярлыки горизонтальной формы Bootstrap с помощью CSS меньше?

Bootstrap имеет множество примеров для типов форм. Я заинтересован в использовании "Горизонтальной формы", которая выглядит следующим образом

Вот как это выглядит после выделения некоторых элементов с помощью панели инструментов веб-инспектора:

Я работаю во всплывающем модале, а пространство уже немного тесновато. Я попытался добавить систему сетки начальной загрузки .span1 и .span2 к меткам как класс, но это не дает желаемого поведения.

Есть ли способ использовать какой-то другой аспект начальной загрузки, чтобы получить желаемое поведение (т.е. уменьшить количество места, которое занимают метки в горизонтальной форме)? Как правильно это сделать? Я использую версию начальной загрузки 2.1

Ответ 1

Я не знаю, есть ли у bootstrap что-то определенное для него... ниже это обходное решение.

<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>

i добавил style="width:auto", который был по умолчанию 140px и style="margin-left:auto", который был по умолчанию 160px. Также class="input-small", чтобы уменьшить ширину поля ввода, чтобы выжать больше пространства, чтобы оно соответствовало модальному..

Теперь вы подстраиваетесь дальше, чтобы соответствовать ему в соответствии с вашими потребностями.

Ответ 2

Чтобы уменьшить вертикальный интервал, form-control-sm уменьшает размер шрифта (используя Bootstrap 4):

<form>
  <div class="form-group form-row">
    <label class="col-sm-2 col-form-label form-control-sm">Label</label>
    <div class="col-sm-3">
      <input class="form-control form-control-sm">
    </div>
  </div>
</form>