Html 将导航项与bootstrap 4中的徽标对齐
我目前正在尝试使用导航栏中心的图像徽标来居中导航项目。如下图所示,导航链接位于我的徽标上方 我想让它看起来更像这样: 这是我的导航代码:Html 将导航项与bootstrap 4中的徽标对齐,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我目前正在尝试使用导航栏中心的图像徽标来居中导航项目。如下图所示,导航链接位于我的徽标上方 我想让它看起来更像这样: 这是我的导航代码: <header> <nav class="navbar"> <div class="container text-xs-center"> <div class="navbar-nav"> <a href='{{ url("/
<header>
<nav class="navbar">
<div class="container text-xs-center">
<div class="navbar-nav">
<a href='{{ url("/") }}' class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">Our Team</a>
<a href="#" class="nav-item nav-link">Media</a>
<a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
<a href="#" class="nav-item nav-link">About Us</a>
<a href='{{ url("/contact") }}' class="nav-item nav-link">Contact Us</a>
<a href='{{ url("/donate") }}' class="nav-item nav-link" id="donate">Support Us</a>
</div>
</div>
</nav>
</header>
任何帮助都将不胜感激 我试过了,希望对你有用。可能是重复的,但是没有人回答这个问题。有人回答了这个问题,所以你应该结束这个重复的问题。我尝试了一些东西,希望对你有用。可能是重复的,但是没有人回答这个问题。有人已经回答了这个问题,所以你应该结束这个重复的问题。
a.nav-item{
color:#000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:bold;
}
a.nav-item:hover{
color:#000;
}
a.nav-item:active{
color:#000;
}
.navbar-nav{
display:inline-block;
}
#donate{
background-color: #7ED321;
border-radius: 8px;
padding: 15px;
}