Bootstrap 下拉菜单在点击时自动调整大小

Posted 2023-03-05

【中文标题】Bootstrap 下拉菜单在点击时自动调整大小

【英文标题】：Bootstrap Dropmenu automatically resizes on click

【发布时间】：2022-01-21 12:49:47

【问题描述】：

我正在构建一个简单的导航栏，在最右边有一个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') "
      
      
      class="d-inline-block align-top"
      
    />
    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"
            
            
            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>

【参考方案1】：

您忘记添加navbar-expand，例如navbar-expand-lg。 正如document 所说：

导航栏需要一个带有 .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 utilities。

<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') "   class="d-inline-block align-top" >
        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"   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>

See it in action.

现在，您可能会看到下拉菜单本身不在屏幕上。你可以修复这个使用menu align option。

<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>

See it in action.