Twitter bootstrap 引导-使内联表单选择更长

我的选择有一个问题，每当我在“forminline”类中对它们进行设置时，它们的长度就会减少很多

船型
1.
1.

---

如何修复此问题，使其占据整个列的长度？

您可以编写自定义css：

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

（假设您使用的是bootstrap 4，form inline将设置display:flex；ready）

您可以使用grid

<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>

船型
1.
1.

或者弹性

<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>

船型
1.
1.

---

演示：

为什么不使用网格？行中的列不是在使用网格吗？我把它删掉了，但这是一个列，在一行中没有问题。它将成为嵌套行，即另一列中的行。

<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>