当导航栏折叠时，下拉菜单浮动在导航栏内 mdbootstrap答案

【问题标题】：Dropdown floating inside navbar when navbar is collapsed mdboostrap当导航栏折叠时，下拉菜单浮动在导航栏内 mdbootstrap
【发布时间】：2019-12-23 19:36:51
【问题描述】：

我正在使用 MDB 版本：8.0.0。我在导航栏上添加了fixed-top 类。下拉菜单浮动在移动设备的导航栏中（您必须在导航栏中向下滚动才能访问下拉菜单。当我删除 fixed-top 类时，下拉菜单会浮动在导航栏上方，这是我想要的行为。

我已经尝试过.navbar-nav { .dropdown-menu-right.dropdown-menu { left: unset; } } 此处提供的解决方案https://mdbootstrap.com/support/angular/fixed-navigation-drop-down-menu-right-out-of-screen/，但它似乎不起作用。

这是我的代码。如果您想试用我的代码，请记住删除 *ngIf="isLoggedIn" 以显示下拉菜单

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark primary-color fixed-top">
<!-- Navbar brand -->
<mdb-navbar-brand><a class="navbar-brand" [routerLink]="['/']">Navbar</a></mdb-navbar-brand>
<!-- Collapsible content -->
<links>
    <!-- Links -->
    <ul class="navbar-nav mr-auto">
        <li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
            <a
            routerLink="/my-orders"
            class="nav-link waves-light"
            mdbWavesEffect>My Orders</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
            <a
            routerLink="/order"
            class="nav-link waves-light"
            mdbWavesEffect>Order</a>
        </li>
    </ul>
    <!-- Links -->

    <ul class="navbar-nav">
        <li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
            <a
            routerLink="/sign-in"
            class="nav-link waves-light"
            mdbWavesEffect>Sign In</a>
        </li>
        <li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
            <a
            routerLink="/sign-up"
            class="nav-link waves-light"
            mdbWavesEffect>Sign Up</a>
        </li>
        <!-- Dropdown -->
        <li *ngIf="isLoggedIn" class="nav-item dropdown" dropdown>
            <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
            <mdb-icon fas icon="user"></mdb-icon> Account<span class="caret"></span></a>
            <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
            <a routerLink="/logout" class="dropdown-item waves-light" mdbWavesEffect>Log out</a>
            </div>
        </li>
    </ul>
</links>
<!-- Collapsible content -->

截图

笔记本电脑。没问题。

移动设备上的当前行为。我必须在导航栏中向下滚动才能访问下拉菜单。

移动设备上的预期行为（当我删除 fixed-top 时工作）

【问题讨论】：

标签： css angular bootstrap-4 mdbootstrap

【解决方案1】：

一种解决方案是像这样使用 mdbootstrap display property：

<!--Navbar Desktop-->
<mdb-navbar class="d-none d-sm-none d-md-block d-lg-block" SideClass="navbar navbar-expand-lg navbar-dark primary-color fixed-top">
</mdb-navbar>
<!--Navbar Desktop-->

<!--Navbar Mobile-->
<mdb-navbar class="d-none d-sm-block d-md-none d-lg-none" SideClass="navbar navbar-expand-lg navbar-dark primary-color"> //removed fixed-top
</mdb-navbar> 
<!--Navbar Mobile-->

【讨论】：