我已经回顾了之前的几个问题，即：Bootstrap NavBar with left, center or right aligned items，但是我在解决问题上还没有运气。
JSF问题的中部：https://jsfiddle.net/po0a6hf2/1/
基本上，我想做的是在左侧导航栏中放置品牌，在中心放置主要链接，最后在右侧放置搜索和个人资料链接。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!---Style Sheets-->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->
<title>Padd</title>
</head>
<body>
<!---Main Content-->
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light d-none d-lg-block">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<div class="row">
<!---Padd Branding-->
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images\notepad-logo2.png" alt="Notepad Logo"
style="width:150px;"></a></li>
</ul>
<!---Navigation Links-->
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Catalogue
</a>
<div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
<a class="dropdown-item" href="#">Furniture</a>
<a class="dropdown-item" href="#">Lighting</a>
<a class="dropdown-item" href="#">Decor</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore Pads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Style Quiz</a>
</li>
</ul>
<!---Search Bar-->
<ul class="nav navbar-nav justify-content-end">
<form class="form-inline my-2 my-lg-0 auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<!---User Profile-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
<a class="nav-link" href="#" id="navbarUserPic" role="button" aria-haspopup="true"
aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<a class="dropdown-item text-center" href="#"><b>@Peter</b></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">My Pads</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!---Bootstrap JavaScript and jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
var firebaseConfig = {
apiKey: "AIzaSyAY5wLj8AaQrhuIO2EOo4dSRkMJokUq3Yk",
authDomain: "notepad-it.firebaseapp.com",
databaseURL: "https://notepad-it.firebaseio.com",
projectId: "notepad-it",
storageBucket: "notepad-it.appspot.com",
messagingSenderId: "975709176926",
appId: "1:975709176926:web:c1aca8fc0c4f7db7"
};
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
CSS：
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navbar {
margin-left: 10px;
margin-right: 10px;
}
.main-logo{
width: 150px;
height: 50px;
}
.navbar-nav li a {
line-height: 50px;
}
.dropdown-menu > li > a {
height: 50px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
background-color: transparent !important;
z-index: 999;
}
.avatar img {
border-radius: inherit;
margin-right:20px;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}
.newPaddButton {
width: 32px;
height: 32px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
background-color: transparent !important;
z-index: 999;
}
.newPaddButton img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}
.dropdown-menu {
width:200px
}
#navbarUserPic{
transform: translateX(68px);
}
@media screen and (max-widht: 780px)
{
dropdown-menu {
max-width:100%
}
}
.navBarBrand {
list-style: none;
position: absolute;
align-content: center;
padding: 0;
z-index: 1;
}
@media screen AND (min-width:991px) {
.navBarBrand {
padding: 6px 0px;
}
}
答案 0 :(得分：0)
我认为这段代码可以帮助您解决问题。
<nav class="navbar navbar-expand-sm navbar-light bg-white fixed-top">
<a class="navbar-brand" href="#">
Logo
</a>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mx-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="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control w-100" type="text" placeholder="Search">
<div class="input-group-append">
</div>
</form>
</div>
</nav>