Question

我正在为网页创建一个导航栏。我能够创建一个左右对齐数据的导航栏，以及中心的品牌。但是，当导航栏折叠时，项目的对齐方式将变为左（过）品牌（过）右。我希望品牌能够保持领先地位，而其他项目则会崩溃。

这是我的代码：

＆＃13;

<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>

＆＃13;

除非使用chrome dev工具检查页面，否则折叠功能无处不在。在chrome dev工具中，显示上述顺序（左 - >品牌 - >右）。这是chrome中的错误，还是我需要做一些额外的配置？

Answer 1

像这样响应地使用order类......

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>

在Bootstrap中重新定位导航栏上的项目崩溃

1 个答案: