Bootstrap5导航栏下拉菜单移动端拉伸导航栏问题求解决方案

问题说明 #

使用Bootstrap 5创建的网站导航栏，桌面端下拉菜单功能运行完全正常，但在移动端视图下触发下拉菜单时会拉伸导航栏，显示效果不美观，需要实现移动端下拉菜单悬浮展示，不会撑高导航栏。

相关截图 #

• 问题对应截图：
• 期望实现效果截图：
• 实际错误效果截图：

现有代码 #

HTML代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
      <img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img" style="margin-left: 150px; height: 40px;"> BuyBuy
    </a>

    <div class="navbar-nav dekstop_search">
      <form class="form-inline" action="{% url 'products:search' %}">
        {% csrf_token %}
        <input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
        <button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
      </form>
    </div>

    <!-- Links -->
    {% if user.is_authenticated %}

    <!-- Right -->
    <div class="navbar-nav">
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
          <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
            <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
            <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <div class="dropdown">
        <img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;" src="{{ user.profile.profile_pic.url }}">
        <div class="dropdown-menu drop" aria-labelledby="navbarDropdown">
          <li class="item text-center" style="font-weight: bolder;"> Hi <strong style="color: #B9C04C; cursor:default;"> {{ user.username }} 👋 </strong></li>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="{% url 'accounts:profile'  request.user.username %}">My Account</a>
          <a class="dropdown-item text-center" href="{% url 'orders:myorders' %}">My Order</a>
          <a class="dropdown-item text-center" href="#">My Address</a>
          <a class="dropdown-item text-center" href="#">My Cart</a>
          <a class="dropdown-item text-center" href="{% url 'accounts:logout' %}">Log Out</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">Settings</a>
          <a class="dropdown-item text-center" href="#">Help</a>
          <a class="dropdown-item text-center" href="#">Privacy Policy</a>
        </div>
      </div>
    </div>
    {% else %}
    <div class="navbar-nav">
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
            <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <a class="nav-link" href="{% url 'accounts:login' %}"><button type="button" class="btn btn-outline-primary text-white">Log In</button></a>
    </div>
    {% endif %}
  </div>
</nav>

自定义CSS代码 #

.drop{
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
}

修改方案 #

问题根源是下拉菜单的父容器dropdown没有设置相对定位作为定位上下文，导致移动端下绝对定位失效，下拉菜单留在文档流内撑开导航栏。直接在自定义CSS中添加以下样式即可解决：

/* 给下拉菜单父容器设置相对定位，作为绝对定位的参照基准 */
.dropdown {
  position: relative !important;
}

/* 移动端适配调整 */
@media (max-width: 991px) {
  .drop {
    /* 调整右侧偏移避免菜单超出屏幕，可根据实际需求调整数值 */
    right: 10px !important;
    /* 提高层级确保下拉菜单浮在所有元素上方 */
    z-index: 1055 !important;
  }
  /* 额外优化：移动端下取消logo和头像的固定边距，避免溢出屏幕 */
  .logo-img {
    margin-left: 10px !important;
  }
  .dropdown-toggle.nav-link {
    margin-right: 10px !important;
  }
}

修改后下拉菜单会脱离文档流悬浮展示，不会再撑高导航栏。

内容的提问来源于stack exchange，提问作者Shreyash mishra