引导程序4导航栏闪烁

时间:2018-11-16 05:00:57

标签: bootstrap-4 navbar nav

在小型设备中,菜单折叠,单击菜单项时菜单区域没有关闭。

因此,我将data-toggle和data-target添加到div中。 然后,问题是在扩展模式下,单击菜单项时会出现闪烁-好像菜单已关闭并重新打开。

请提出如何解决此问题的建议。下面的代码。

<nav class="navbar navbar-expand-lg fixed-top">

    <div class="container">

        <button class="navbar-toggler"
                        data-toggle="collapse" data-target="#collapse_target">
            <span class="navbar-toggler-icon"></span>
        </button>

        <a routerLink="home" class="navbar-brand">
            <img    src="/assets/logo.png" />
        </a>

        <div    id="collapse_target" class="collapse navbar-collapse"
                    data-toggle="collapse" data-target="#collapse_target">
            <ul class="navbar-nav mr-auto">
            </ul>

            <ul class="navbar-nav">

                <li class="nav-item d-md-block d-lg-none">
                    <a  class="nav-link" routerLink="home"
                            [routerLinkActive]="['class1', 'class2']">
                        Home
                    </a>
                </li>

                <li class="nav-item">
                    <a  class="nav-link" routerLink="page1"
                            [routerLinkActive]="['class1', 'class2']">
                        Page 1
                    </a>
                </li>

                <li class="nav-item">
                    <a  class="nav-link" routerLink="page2"
                            [routerLinkActive]="['class1', 'class2']">
                        Page 2
                    </a>
                </li>


                <li class="nav-item">
                    <a  class="nav-link" routerLink="page3"
                            [routerLinkActive]="['class1', 'class2']">
                        Page 3
                    </a>
                </li>

            </ul> <!-- end class="navbar-nav" -->


        </div> <!-- end div id="collapse_target" class="collapse navbar-collapse" -->

    </div> <!-- end div class="container" -->

</nav> <!-- end nav class="navbar navbar-expand-lg fixed-top" -->

0 个答案:

没有答案