Question

我正在尝试创建一个导航栏，其中包含一些可折叠的项目以及徽标和按钮，这些按钮应始终可见。我希望将用于显示可折叠项目的按钮放在徽标的左侧，而将始终可见的按钮放在右侧，因此我尝试使用以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#userNavbarContent"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" routerLink="/">Logo</a>
        <div class="collapse navbar-collapse" id="userNavbarContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">4</a>
            </li>
          </ul>
        </div>
        <button class="btn btn-outline-light mr-0">Logout</button>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

问题在于，每当我按下切换器时，它都会推开徽标和“注销”按钮。我该如何解决？

Answer 1

使用flexbox命令对移动类上的导航链接重新排序...

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#userNavbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">Logo</a>
        <div class="collapse navbar-collapse order-last order-lg-0" id="userNavbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">4</a>
                </li>
            </ul>
        </div>
        <button class="btn btn-outline-light mr-0">Logout</button>
    </div>
</nav>

演示：https://codeply.com/p/2qbQ3zYwai

相关：Bootstrap 4 align navbar items to the right

在导航栏中显示可折叠项目会更改导航栏设计

1 个答案: