内联输入组，如有必要，请使用换行

Question

我想根据输入内容的动态宽度将输入组并排放置。到目前为止，一切都很好。我唯一的问题是，如果无法水平放入，它们将从容器中流出。

如果空间足够：

如果空间不足（现在的样子）：

如果空间不足（我想要它）：

我拥有的代码：

<form class="form-inline">
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
</form>

Answer 1

问题是您将所有内容包装在一个.form-group中。每个input-group应该在自己的.form-group

之内

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
</form>