Question

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

我尝试了https://mdbootstrap.com/support/angular/fixed-navigation-drop-down-menu-right-out-of-screen/这里提供的解决方案.navbar-nav { .dropdown-menu-right.dropdown-menu { left: unset; } }，但似乎没有用。

这是我的代码。如果您想尝试我的代码，请记住删除*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-->

导航栏折叠时在导航栏内浮动的下拉列表mdboostrap

1 个答案: