BootstrapDropmenu在點擊時自動調整大小

我正在構建一個簡單的導航欄，drop-down menu在最右側有一個，如下所示：

問題是，當我單擊下拉選單時，導航欄會自動調整大小，如下圖所示，這不是我想要的

這是我的navbar代碼：

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="/dashboard">
    <img
      src="{{ url_for('static', filename='images/logo.png') }}"
      width="30"
      height="30"
      class="d-inline-block align-top"
      alt=""
    />
    App Test
  </a>

  <div>
    <ul class="navbar-nav" style="padding: 0px">
      <li class="nav-item dropdown" style="border: none">
        <a
          class="nav-link dropdown-toggle"
          href="#"
          id="navbarDropdownMenuLink"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <img
            src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg"
            width="40"
            height="40"
            class="rounded-circle"
          />
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Dashboard</a>
          <a class="dropdown-item" href="#">Edit Profile</a>
          <a class="dropdown-item" href="#">Log Out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

uj5u.com熱心網友回復：

您忘記添加navbar-expand諸如navbar-expand-lg.
正如檔案所說：

導航欄需要一個帶有 .navbar-expand{-sm|-md|-lg|-xl} 的包裝 .navbar 用于回應式折疊和配色方案類。

和：

對于永不折疊的導航欄，請在導航欄上添加 .navbar-expand 類。對于總是折疊的導航欄，不要添加任何 .navbar-expand 類。

在.navbar-expand-xx與.dropdown-menu選擇含有position:absolute;這使下拉選單的樣子，而不是浮動的面積擴大。

添加navbar-expand-類后，導航欄需要flex-grow-1品牌元素上的類才能將選單按鈕推到右側。這是 Bootstrap 的flex 實用程式。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand flex-grow-1" href="/dashboard">
        <img src="{{ url_for('static', filename='images/logo.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
        App Test
    </a>

    <div>
        <ul class="navbar-nav" style="padding: 0px;">
            <li class="nav-item dropdown" style="border: none;">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" class="rounded-circle">
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Dashboard</a>
                    <a class="dropdown-item" href="#">Edit Profile</a>
                    <a class="dropdown-item" href="#">Log Out</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

看到它在行動。

現在，您可能會看到下拉選單本身不在螢屏上。您可以修復此使用選單對齊選項。

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="#">Dashboard</a>
    <a class="dropdown-item" href="#">Edit Profile</a>
    <a class="dropdown-item" href="#">Log Out</a>
</div>

看到它在行動。

標籤：html css bootstrap-4 导航栏

上一篇：使用css中的before屬性看不到背景影像

下一篇：使用CSS網格，您可以讓第1行完整和第2行自動適應嗎？