Question

Hie，我一直在尝试使用数据切换器来扩展响应式导航栏，但是它无法正常工作，查看了其他相关问题，但是我已经解决了这些问题，也许第二只眼睛可以做，我的控制台给了我“字符串预期错误”。

我已经按顺序包括了我的jquery，bootstrap包和bootstrap js。顺便使用引导程序4：）

                <nav class="navbar navbar-expand-md navbar-light  bg-warning    px-5 py-0">

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

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>

Answer 1

您的代码对我有效。您可以在正文标签之间粘贴这些CDN地址吗？

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 2

我使用下面的引导程序4测试您的代码。您的代码正在工作。在您的理解中，我发现了一个引导导航栏崩溃的问题。与屏幕相关或与浏览器宽度有关。如果您使用navbar-expand-md class，引导程序导航栏在浏览器宽度小于或等于767.98px之前不会折叠。

导航栏如何工作？

navbar（无navbar-expand-* class导航栏将折叠为全屏显示，因为引导程序是移动优先设计。
navbar和navbar-expand-xl class导航栏只会折叠小于或等于1199.98px的浏览器屏幕。
navbar和navbar-expand-lg class导航栏只会折叠小于或等于991.98px的浏览器屏幕。
navbar和navbar-expand-md class导航栏只会折叠小于或等于767.98px的浏览器屏幕。
navbar和navbar-expand-sm class导航栏将仅折叠小于或等于575.98px的浏览器屏幕。

我建议您在特定的浏览器窗口中检查代码。使用Ctrl+Shift+I for Chrome打开inspect元素，也可以在inspect元素中右键单击鼠标。然后切换设备工具栏或Ctrl+Shift+M来检查特定宽度。

还要检查head tag中的Bootstrap css。 jQuery，Popper.js和Bootstrap.js将分别在body tag的末尾添加。您应该在head标签<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

中添加元视图端口

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light  bg-warning    px-5 py-0">

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

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Bootstrap 4导航栏未切换

2 个答案: