twitter-bootstrap 中心无序列表导航栏 - 引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17905019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
center unordered list navbar - bootstrap 3
提问by prufrock
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'
所以，我试图将我的导航栏列表项居中。由于此任务没有实用程序函数，因此我设计了以下代码，将无序列表放在一行中的一列中。但是即使在我尝试使用旧的“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>
回答by deizel
Steps I took:
我采取的步骤：
- Remove
float: leftfrom list and list elements - Use
display: inlineinstead for list elements - Set links to
display: inline-blockso they keep their block dimensions - Simply add
text-align: centerto the navbar to center everything - Wrap in media query so vertical list on mobile is unaffected
float: left从列表和列表元素中删除- 使用
display: inline而不是为列表元素 - 将链接设置为
display: inline-block保持块尺寸 - 只需添加
text-align: center到导航栏即可将所有内容居中 - 包装在媒体查询中，因此移动设备上的垂直列表不受影响
Resulting CSS adding a .navbar-centeredstyle:
添加.navbar-centered样式的结果 CSS ：
@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-centeredstyle to navbar:
通过将.navbar-centered样式应用于导航栏来使用：
<div class="navbar navbar-default navbar-centered" role="navigation">
...
</div>
回答by prufrock
I was able to figure this out on my own. Not sure if it was the best solution:
我能够自己解决这个问题。不确定这是否是最佳解决方案：
<div class="navbar navbar-fixed-top">
<div style="border:1px solid black" class="container">
<div class="inner-nav">
<!--<a href="#" class="navbar-brand">Title</a> -->
<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>
I then added the following styles to bootstrap.css:
然后我将以下样式添加到 bootstrap.css：
/* ADDED for centering navbar items */
.navbar .inner-nav ul {
position:relative;left:50%;float:left;margin-right:0;margin-left:0;
}
/* ADDED for centering navbar items */
.navbar .inner-nav li {
position:relative;right:50%;float:left;margin:0;list-style:none
}
回答by Ishan Dhingra
Here is the code I did yesterday, works fine with Bootstrap 3 RC1. Hope this will help you.
这是我昨天做的代码，适用于Bootstrap 3 RC1。希望这会帮助你。
<nav class="navbar navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#" >Home</a></li>
<li><a href="#" >Services</a></li>
</ul>
</div>
</nav>
Let me know if problem is still there.
如果问题仍然存在，请告诉我。
Edit:Removed unnecessary markup
编辑：删除了不必要的标记
