我正在为网页制作导航栏。我能够制作一个导航栏，其中数据左右对齐，品牌位于中心。但是，当导航栏折叠时，项目的对齐方式变为左（上） 品牌（上） 右。我希望该品牌保持领先地位，而其他项目则崩溃。
这是我的代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-primary">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item about">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/">Brand</a>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
</body>
</html>
折叠功能在任何地方都可以正常工作，除非使用 chrome 开发工具检查页面。在chrome开发工具中，按上述顺序显示（左->品牌->右）。这是 chrome 中的错误，还是我需要做一些额外的配置？
Use the order像这样响应式上课...
https://www.codeply.com/go/gRhjuLo4LF https://www.codeply.com/go/gRhjuLo4LF
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item about">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
<div class="mx-auto order-0 order-lg-2">
<a class="navbar-brand mx-auto" href="/">Brand</a>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
