手机的Bootstrap顶部菜单不起作用

时间:2018-10-14 01:27:41

标签: html css bootstrap-4 font-awesome

此固定顶部菜单在台式机上正常运行,但在移动设备上无法正常工作。如何使其与移动设备一起使用。

我正在使用引导程序和超棒的字体。

代码如下:

        <!-- Navigation -->
    <header class="nav">
        <div class="nav__holder nav--sticky">
            <div class="container-fluid nav__container nav__container--side-padding">
                <div class="flex-parent">

                    <div class="nav__header">
                        <!-- Logo -->
                        <a href="index.php" class="logo-container flex-child">
                            <img class="logo" src="img/ERRE_logo_2.png" srcset="img/ERRE_logo_2.png 1x, img/ERRE_logo_2.png 2x" alt="logo">
                        </a>

                        <!-- Mobile toggle -->
                        <button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="nav__icon-toggle-bar"></span>
                            <span class="nav__icon-toggle-bar"></span>
                            <span class="nav__icon-toggle-bar"></span>
                        </button>
                    </div>

                    <!-- Navbar -->
                    <nav id="navbar-collapse" class="nav__wrap collapse navbar-collapse">
                        <ul class="nav__menu">
                            <li class="nav__dropdown active">
                                <a href="index.php" aria-haspopup="true">Início</a>
                                <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>

                            </li>
                            <li class="nav__dropdown">
                                <a href="portfolio-gallery.html" aria-haspopup="true">Portfolio</a>
                                <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>


                            </li>
                            <li class="nav__dropdown">
                                <a href="#servicosan" aria-haspopup="true">Serviços</a>
                                <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
                            </li>


                            </li>
                            <li class="nav__dropdown">
                                <a href="#contactosan" aria-haspopup="true">Contactos</a>
                                <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
                            </li>

                        </ul> <!-- end menu -->

我该如何做?

1 个答案:

答案 0 :(得分:0)

我通过更改以下内容来解决此问题:<li class="nav__dropdown"> 为此:<li class="">

现在,它已经固定并且运行良好。