Bootstrap 4 将 Logo 对齐到左侧，中心菜单和顶部链接在右侧

Question

我目前无法创建 2 行并将徽标（标题）对齐到左侧，“主页”和“用户”菜单链接到右上角。第二行应在中间显示“Link1”、“Link2”、“Link3”菜单。以下代码似乎没有正确对齐。

我尝试使用“navbar-nav mr-auto”作为徽标，但没有成功。还尝试了“主页”、“关于”链接“ml-auto”。它不起作用。

*******************************************************************************************
                                                                          Home About User
Logo Heading1                                                              

                          Link1  Link2 Link3 Link4
*******************************************************************************************

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand mr-auto" href="">
            <img style="width: 72px; height: 71px;" src="logo-1.png">Heading
        </a>
        <div class="d-flex flex-column flex-wrap" id="navbarCollapse">
            <ul class="navbar-nav mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                </li>
            <li class="nav-item">
                <a class="nav-link" href="About.aspx" >About</a>
            </li>
                <li class="nav-item">
                <a class="nav-link" href="User.aspx" >User</a>
            </li>

            </ul>

            <div id="divSubMenu" runat="server" >
                <ul class="navbar-nav mx-auto mt-auto">
                    <li class="nav-item active" id="liDashboard" runat="server">
                        <a class="nav-link" href="Dashboard.aspx">Link1</a>
                    </li>
                    <li class="nav-item" id="liaint" runat="server">
                        <a class="nav-link" href="ation.aspx">Link2</a>
                    </li>
                    <li class="nav-item" id="liign" runat="server">
                        <a class="nav-link">Link3</a>
                    </li>
                    <li class="nav-item" id="lise" runat="server">
                        <a class="nav-link" href="Search.aspx">Link4</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Answer 1

试试这个代码。希望能帮到你。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto text-md-center mt-5">
      <li class="nav-item active" id="liDashboard" runat="server">
        <a class="nav-link" href="Dashboard.aspx">Link1</a>
      </li>
      <li class="nav-item" id="liaint" runat="server">
        <a class="nav-link" href="ation.aspx">Link2</a>
      </li>
      <li class="nav-item" id="liign" runat="server">
        <a class="nav-link">Link3</a>
      </li>
      <li class="nav-item" id="lise" runat="server">
        <a class="nav-link" href="Search.aspx">Link4</a>
      </li>
    </ul>
    <div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
     <ul class="navbar-nav mb-5">
      <li class="nav-item">
        <a class="nav-link" href="ace.aspx">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="About.aspx" >About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="User.aspx" >User</a>
      </li>
    </ul>
  </div>
</div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Answer 2

希望下面的代码对你有所帮助

<div class="container">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">Logo Heading1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav mx-auto">
                <li class="nav-item active" id="liDashboard" runat="server">
                  <a class="nav-link" href="Dashboard.aspx">Link1</a>
                </li>
                <li class="nav-item" id="liaint" runat="server">
                  <a class="nav-link" href="ation.aspx">Link2</a>
                </li>
                <li class="nav-item" id="liign" runat="server">
                  <a class="nav-link">Link3</a>
                </li>
                <li class="nav-item" id="lise" runat="server">
                  <a class="nav-link" href="Search.aspx">Link4</a>
                </li>
              </ul>
              <div class="nav-item">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="About.aspx" >About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="User.aspx" >User</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

如果你想输出就像你在下面中间上方的徽标上方提供的文字

<div class="container">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg navbar-light align-items-start">
            <a class="navbar-brand" href="#">Logo Heading1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav mx-auto mt-5">
                <li class="nav-item active" id="liDashboard" runat="server">
                  <a class="nav-link" href="Dashboard.aspx">Link1</a>
                </li>
                <li class="nav-item" id="liaint" runat="server">
                  <a class="nav-link" href="ation.aspx">Link2</a>
                </li>
                <li class="nav-item" id="liign" runat="server">
                  <a class="nav-link">Link3</a>
                </li>
                <li class="nav-item" id="lise" runat="server">
                  <a class="nav-link" href="Search.aspx">Link4</a>
                </li>
              </ul>
              <div class="nav-item">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="ace.aspx">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="About.aspx" >About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="User.aspx" >User</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

Answer 3

您可以尝试在 bootstrap 4 中堆叠多个导航栏，如下所示。请查看此答案是否符合您的要求。希望这会有所帮助！

编辑：将我的代码更新为只有问题中要求的两行。祝你好运冠军..

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Stack Answer</title>

  <!-- Bootstrap core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarResponsive1">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">User</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
    <div class="container">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="navbar-brand" href="#">
          <img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
          Stack Answer
          </a>
        </li>
      </ul>
      <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Link1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link4</a>
          </li>
        </ul>
    </div>
  </nav>

  <!-- Page Content -->


  <!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

</body>

</html>