我尝试使用引导程序制作一个合适的导航栏。
我尝试在中间制作徽标,其余部分在左侧和右侧制作。当前的解决方案是不干净的,我想请教一下如何解决它的问题。
问题:徽标到左/右对象的长度不同,并且徽标不能完美居中。[导航栏] [1]
当前HTML:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">Status</a></li>
<li class="nav-item"><a href="#" class="nav-link">Download</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
</ul>
<a class="navbar-brand" href="#">
<img src="/img/helmet.png" height="100" with="50" alt="">
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li>
<li class="nav-item"><a href="/places/" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="#" class="nav-link">Plex</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
的CSS
.collapse.navbar-collapse ul{
margin: auto;
}
.navbar-brand {
position: absolute;
top: 0;
left: 50%;
text-align: center;
margin: auto;
font-size: 36px;
}
.bg-dark {
background:transparent !important;
background-image: url("/img/navbar.png") !important;
min-height: 70px;
}
您可以使用pull-right
class来使项目向右对齐,但是还需要进行一些修改才能正常工作。我已经使用您提供的链接创建了一个干净的解决方案。
body { background-color: blueviolet !important; }
.navbar {
position: relative;
top:10px;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important;
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!--If you want to add background image add it to the class below-->
<div class="container-fluid"><!--add this line-->
<div class="row"><!--add this line-->
<div class="col-md-12"><!--add this line-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="brand" style="margin: 0; float: none;" href="#">
<!--add logo source-->
<img src="icon.png" alt="logo" title="logo" height="100" with="50" />
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="#" class="nav-link">Status</a></li>
<li class="nav-item"><a href="#" class="nav-link">Download</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
</ul>
<ul class="navbar-nav pull-right">
<li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li>
<li class="nav-item"><a href="#" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="#" class="nav-link">Plex</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div><!--add this line-->
</div><!--add this line-->
<!--New Row for the main content-->
<div class="row">
<div class="col-md-12">
<!--Main content-->
</div>
</div>
</div><!--add this line-->
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句