引导 4 将徽标左对齐，中心菜单和顶部链接右对齐

Question

我目前在创建 2 行并将徽标(标题(对齐到左侧时遇到问题，"主页"和"用户"菜单链接到右上角。第二行应在中心显示"链接1"、"链接2"、"链接3"菜单。以下代码似乎未正确对齐。

我尝试使用"导航栏导航先生自动"作为徽标，但它不起作用。还尝试了"主页"，"关于"链接"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

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