我想把它設計成。過濾器容器在一行中彼此相鄰，如果一個過濾器容器有一個標題容器，它應該在新的一行開始，其余的。過濾容器將放在它旁邊。

* *已編輯:添加了一些引導類和vue代碼

所需布局:

當前布局:

new Vue({
  el: "#app",
  data: {
        options: [
          {
            Id: 80,
            group: { GroupName: "MatrixDesc" },
            column: { ColumnAlias: "ReviewStatus" },
          },
          { Id: 81, group: { GroupName: "" }, column: { ColumnAlias: "AOI" } },
          {
            Id: 82,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "Location",
            },
          },
          {
            Id: 83,
            group: { GroupName: "Header2" },
            column: { ColumnAlias: "Chemical" },
          },
          {
            Id: 84,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "CollectionDate",
            },
          },
        ],
      },
  
})

<link  rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
  <div class="d-flex flex-wrap align-items-end mx-3">
    <div v-for="(fdata, index) in options" :key="index">
      <span v-if="fdata.group != null">
        <div v-if="fdata.group.GroupName" class="header-container">
          <h4>{{ fdata.group.GroupName }}</h4>
        </div>
        <div class="Filter-with-header">
          <div class="Filter-info-wrapper">
            <input
              type="text"
              spellcheck="false"
              v-model="fdata.column.ColumnAlias"
            />
          </div>
        </div>
      </span>
    </div>
  </div>
</div>