twitter-bootstrap - 使用 Bootstrap 内联两个元素

Question

我正在练习我的 bootstrap 技能，但不知何故我陷入了内联输入和选择

这是我想要的结果

然而我不知何故得到了这个

通过使用此代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2">
  <label>Length of Stay</label>
  <div class="form-group d-inline">
    <input type="text" class="form-control">
    <select class="custom-select">
      <option disabled selected>Select Length</option>
      <option value="Years">Years</option>
      <option value="Months">Months</option>
      <option value="Days">Days</option>
    </select>
  </div>
</div>

知道我该如何解决这个问题吗？

Answer 1

将 Bootstrap 类 d-flex 添加到 form-group。谢谢

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2">
  <label>Length of Stay</label>
  <div class="form-group d-flex">
    <input type="text" class="form-control">
    <select class="custom-select">
      <option disabled selected>Select Length</option>
      <option value="Years">Years</option>
      <option value="Months">Months</option>
      <option value="Days">Days</option>
    </select>
  </div>
</div>