Bootstrap - Увеличение длины встроенной формы

Question

У меня возникает проблема с моими выборами, когда я помещаю в них класс form-inline, их длина уменьшается на много

<div class="col">
    <div class="form-group form-inline">
        <label for="boatType">Boat Type </label>
        <select class="form-control" id="boatType">
            <option value=""></option>
            <option value="1">1</option>
            <option value="1">1</option>
        </select>
    </div>
</div>

Как это исправить, чтобы она занимала длину всего столбца?

Answer 1

Вы можете использовать сетку,

<div class="form-group row">
  <label for="boatType" class="col-3 col-form-label">Boat Type </label>
  <div class="col-9">
    <select class="form-control" id="boatType">
      <option value=""></option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
  </div>
</div>

Или гибкий,

<div class="form-group d-flex">
  <label for="boatType" class="col-form-label">Boat Type </label>
  <div class="flex-grow-1">
    <select class="form-control" id="boatType">
      <option value=""></option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
  </div>
</div>

Демо: https://stackblitz.com/edit/angular-x2akmg

Answer 2

Вы можете написать пользовательский css:

.form-group.form-inline label,
.form-group.form-inline select {
  flex: 1;
}

(при условии, что вы используете bootstrap 4 и форма-в-строке установит отображение: flex; уже)