所以,我试图将我的导航栏列表项居中。由于此任务没有实用函数,因此我设计了以下代码,将无序列表放置在行内的列中。但即使在我尝试使用旧的“text-align:center”居中后,列表仍然向左对齐
<div class="navbar navbar-fixed-top ">
<!--<a class="navbar-brand" href="#">Title</a> -->
<div class= "row">
<div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
我采取的步骤:
- Remove
float: left
来自列表和列表元素
- Use
display: inline
代替列表元素
- 将链接设置为
display: inline-block
所以他们保持块尺寸
- 只需添加
text-align: center
到导航栏将所有内容居中
- 包装在媒体查询中,因此移动设备上的垂直列表不受影响
结果 CSS 添加了一个.navbar-centered
style:
@media (min-width: 768px) {
.navbar-centered .navbar-nav {
float: none;
text-align: center;
}
.navbar-centered .navbar-nav > li {
float: none;
}
.navbar-centered .nav > li {
display: inline;
}
.navbar-centered .nav > li > a {
display: inline-block;
}
}
通过申请使用.navbar-centered
导航栏样式:
<div class="navbar navbar-default navbar-centered" role="navigation">
...
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)