css - 当导航栏折叠时，下拉菜单在导航栏内 float mdbootstrap

Question

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

我已经尝试了解决方案 .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 时工作)

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