下拉菜單 - 列堆疊在里面

Question

嘗試在 web 頁面上創建一個過濾器，該頁面使用 Bootstrap 的下拉菜單並將每個過濾器並排放置在列中，但它現在將它們堆疊起來。 過濾器菜單是通過循環我要創建的項目數組動態創建的，每個項目都是我想放在菜單上的新列。 我試圖在我的行元素上使用帶有 class row-cols-# 的網格布局（容器 > 行 > 列），但這並不像我想象的那樣有效。

我可以使用style屬性強制我的菜單具有一定的寬度，並使列 position 正確，但是我的菜單不再根據 n 列適當調整大小。

我正在使用 d-flex、flex-row 和 flex-column 來創建側邊欄導航，我想知道這是否會導致某些問題？

這是一個網頁示例，用於說明。 過濾器菜單幫助

Answer 1

它們堆疊的主要原因是因為您使用的是.col-auto而.row默認情況下具有flex-wrap: wrap; , 所以它會讓每一列盡可能小並包裝它們。

第二個原因是dropdown-menu是絕對定位的，但相對於.dropdown包裝器。 因為您將包裝器放置在頁面的右側，所以dropdown-menu的寬度不會像您期望的那樣增加。

所以：

• 不要使用自動列，而是在dropdown-menu上設置max-width 。
• 刪除<div class="dropdown"></div>包裝器。

這是一個示例，您可以如何使用布局在 Codeply 中制作下拉菜單。

在小屏幕尺寸上，列將使用<div class="row flex-column flex-sm-row">堆疊。 每個過濾器列都使用一個列表<ul><li>...</li></ul>來包含復選框和簡單的樣式。

<form class="dropdown-menu p-2 mt-1 overflow-auto">
  <div class="container-fluid">
    <div class="row flex-column flex-sm-row">
      <ul class="col list-unstyled">
        <li>
          <h6 class="dropdown-header">Dropdown header</h6>
          <hr class="dropdown-divider">
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="first">
          <label class="form-check-label stretched-link" for="first">First checkbox</label>
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="second">
          <label class="form-check-label stretched-link" for="second">Second checkbox</label>
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="third">
          <label class="form-check-label stretched-link" for="third">Third checkbox</label>
        </li>
      </ul>
      <ul class="col list-unstyled">
        ...
      </ul>
    </div>
    <div class="d-flex justify-content-end gap-3">
      <button type="reset" class="btn btn-sm btn-warning clear-filter">Clear Filter</button>
      <button type="submit" class="btn btn-sm btn-danger">Submit</button>
    </div>
  </div>
</form>

要告訴 Flex 何時開始換行，請在dropdown-menu上設置max-width 。 例如，我將其設置為75vw ，但它可以設置為您想要的任何寬度。 您可以改用row-cols-* ，但是您必須為每個斷點添加一個列號，例如.row-cols-1 row-cols-sm-2 row-cols-md-4而設置max-width更容易維護，並且隨着列的拉伸方式在視覺上看起來更好。

為了使stretched-link起作用，父級必須具有position: relative; 應用於它。 和whitespace: nowrap; 用於使每個<label>與復選框保持一致。

form {
 max-width: 75vw;
 max-height: 80vh;
}

.col li {
  position: relative;
  white-space: nowrap;
}

最后，為了防止dropdown-menu在與其交互時關閉，請在<button>切換器上添加data-bs-auto-close="outside" 。