Bootstrap5下拉選單是否需要額外的外部div？

我花了相當多的時間來解決 Bootstrap 5 下拉選單的問題。問題是下拉串列被包含表和/或table-responsivediv 裁剪，并且data-boundary="viewport"在 Bootstrap 4 中作業的那個不再作業。

最后，我發現添加position-static類解決了這個問題。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>
          <div class="dropdown position-static">
            <span type="button" data-bs-toggle="dropdown">
              <img src="https://via.placeholder.com/80x20" title="Menu" />
            </span>
            <div class="dropdown-menu dropdown-menu-right">
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
              <div class="dropdown-divider"></div>
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
              <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            </div>
          </div>
        </td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

但后來我繼續玩這個，我發現如果我洗掉外部dropdowndiv 并將該類提供給下拉按鈕，它也可以作業。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>
          <span type="button" class="dropdown" data-bs-toggle="dropdown">
            <img src="https://via.placeholder.com/80x20" title="Menu" />
          </span>
          <div class="dropdown-menu dropdown-menu-right">
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            <div class="dropdown-divider"></div>
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
          </div>

        </td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

這不是 Bootstrap 檔案所說的下拉選單的方式。他們所有的例子都包括那個外部 div。

沒有外部 div 的版本對我來說似乎在所有情況下都可以正常作業。有誰知道外部 div 的用途，或者使用這種簡化結構可能會遇到什么樣的問題？

uj5u.com熱心網友回復：

在查看外部 div 上的樣式時，我們看到唯一的規則是position: relative;. 想必這是為了方便下拉子元素的絕對定位。

是否需要這取決于您。

標籤：html css 推特引导 引导程序 5

上一篇：Ginkgo/Gomega恐慌測驗失敗

下一篇：如何將div放置在4個部分中以進行移動視圖