Bootstrap 4 Flexbox禁用特定项

Question

我正在使用d-flex对齐我的项目。使用Bootstrap 4 Flexbox（见图）。

这是我的标记：

<div class="card">
  <div class="card-block">
    <div class="bulk-filter-wrapper d-flex">

      <div class="form-group">
        <label for="edit-status">Published status</label>
        <select data-drupal-selector="edit-status" id="edit-status" name="status" class="form-select form-control"><option value="All" selected="selected">- Any -</option><option value="1">Published</option><option value="2">Unpublished</option></select>
      </div>

      <div class="form-group">
        <label for="edit-type">Content type</label>
        <select data-drupal-selector="edit-type" id="edit-type" name="type" class="form-select form-control"><option value="All" selected="selected">- Any -</option><option value="organization">Organisatie</option><option value="page">Page</option><option value="person">Persoon</option></select>
      </div>

      <div class="form-group">
        <label for="edit-title">Title</label>
        <input data-drupal-selector="edit-title" type="text" id="edit-title" name="title" value="" size="30" maxlength="128" class="form-text form-control">
      </div>

      <input data-drupal-selector="edit-submit-content" type="submit" id="edit-submit-content" value="Filter" class="button js-form-submit form-submit btn btn-primary">

    </div>
  </div>
</div>

但右侧的按钮（过滤器）我想禁用它的对齐并将其放在左侧的新行上，在其他输入字段下。我该如何管理？

（因为它是由Drupal渲染的，所以很难从flex包装器bulk-filter-wrapper d-flex中取出按钮。）

Answer 1

您可以将按钮放在全宽div中，然后将flex-wrap添加到d-flex容器中。

<div class="w-100">
    <input type="submit" id="edit-submit-content" value="Filter" class="button js-form-submit form-submit btn btn-primary">
</div>

https://www.codeply.com/go/WSrEPAvTQ1