中心无序列表导航栏 - 引导程序 3 [英] center unordered list navbar - bootstrap 3
本文介绍了中心无序列表导航栏 - 引导程序 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以,我试图将我的导航栏列表项居中.由于此任务没有实用程序函数,因此我设计了以下代码,将无序列表放在一行中的一列中.但是即使在我尝试使用旧的 'text-align:center' 居中后,该列表仍然向左对齐
<div class="navbar navbar-fixed-top "><!--<a class="navbar-brand" href="#">Title</a>--><div style="border:1px 纯黑色;text-align:center;"class="col-4 col-offset-4"><ul class="nav navbar-nav"><li class="active"><a href="/">首页</a></li><li><a href="#">关于</a></li><li><a href="#">项目</a></li><li><a href="#">联系方式</a></li>
解决方案
我采取的步骤:
- 从列表和列表元素中移除
float: left
- 使用
display: inline
代替列表元素 - 将链接设置为
display: inline-block
以保持其块尺寸 - 只需将
text-align: center
添加到导航栏即可将所有内容居中 - 包含在媒体查询中,因此移动设备上的垂直列表不受影响
结果 CSS 添加了 .navbar-centric
样式:
@media (min-width: 768px) {.navbar 为中心 .navbar-nav {浮动:无;文本对齐:居中;}.navbar 为中心的 .navbar-nav >李{浮动:无;}.navbar 为中心的 .nav >李{显示:内联;}.navbar 为中心的 .nav >立>一种 {显示:内联块;}}
通过将 .navbar-centric
样式应用于导航栏来使用:
So, Im trying to center my nav-bar list items. Since there isn't a utility function for this task, I devised the following code that places the unordered list in a column within a row. But the list is still justified to the left even after I try centering with the old '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>
解决方案
Steps I took:
- Remove
float: left
from list and list elements - Use
display: inline
instead for list elements - Set links to
display: inline-block
so they keep their block dimensions - Simply add
text-align: center
to the navbar to center everything - Wrap in media query so vertical list on mobile is unaffected
Resulting CSS adding a .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;
}
}
Use by applying .navbar-centered
style to navbar:
<div class="navbar navbar-default navbar-centered" role="navigation">
...
</div>
这篇关于中心无序列表导航栏 - 引导程序 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文