Html 引导4向左对齐徽标，居中菜单，右对齐顶部链接_Html_Css_Twitter Bootstrap_Bootstrap 4

Html 引导4向左对齐徽标，居中菜单，右对齐顶部链接

html css twitter-bootstrap bootstrap-4

Html 引导4向左对齐徽标，居中菜单，右对齐顶部链接,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我目前无法创建2行，无法将align徽标（标题）移到左侧，“主页”和“用户”菜单链接移到右上角。第二行应在中间显示“Link1”、“Link2”、“Link3”菜单。以下代码似乎没有正确对齐我曾尝试使用“navbar nav mr auto”作为徽标，但没有成功。还尝试了“主页”、“关于”链接“ml自动”。它不起作用 *****************************************************************************************

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

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

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

*******************************************************************************************
主页关于用户
徽标标题1
链接1链接2链接3链接4
*******************************************************************************************

您可以尝试在引导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>


堆栈应答

试试这段代码。希望能帮助你

希望下面的代码能帮助您

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

尝试在导航栏中的容器上使用flex