Question

我正在网站上并使用Bootstrap4。
对于导航，我使用的是引导导航栏，始终在左侧显示汉堡包图标。
只需在每台设备上，用户只需单击汉堡包图标即可查看菜单项。
导航栏代码是;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-dark bg-primary  shadow-sm">
    <a class="navbar-brand" href="#">
        ABC Company
      </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
            <span class="navbar-toggler-icon"><i class="fas fa-bars" style="color:#000; font-size:28px;"></i></span>
        </button>
        <div class="navbar-collapse collapse" id="collapsingNavbar">
            <ul class="navbar-nav text-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="//codeply.com">Codeply</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#myAlert" data-toggle="collapse">Wow</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
            </ul>
        </div>
    </nav>

请参考JSFiddle链接。（我是jsfiddle的新手。）

当用户单击汉堡包图标时，折叠菜单将打开。
汉堡折叠菜单的宽度与导航栏的宽度相同。
我需要减小折叠菜单的宽度。 like this

我该如何实现？

更改导航栏汉堡菜单（始终显示汉堡菜单）

0 个答案: