twitter-bootstrap Center Bootstrap Navbar -- 不明白为什么导航不会居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20696814/
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 Bootstrap Navbar -- do not understand why navigation won't center
提问by Michael Falciglia
I just started to learn bootstrap today and I was working with their example on this page http://getbootstrap.com/examples/offcanvas/
我今天刚开始学习引导程序，我正在这个页面上使用他们的例子http://getbootstrap.com/examples/offcanvas/
As you can see if you go to that page, the navigation is aligned to the left. I have attempted to use what I do in normal CSS, which is:
如您所见，如果您转到该页面，导航将向左对齐。我试图使用我在普通 CSS 中所做的，即：
margin-right:autoand margin-left:auto
margin-right:auto和 margin-left:auto
I also tried
我也试过
text-align:center
text-align:center
Neither of these have worked and I have read their navigation documentation and I don't understand what I am suppose to do differently here.
这些都没有奏效，我已经阅读了他们的导航文档，我不明白我在这里应该做些什么不同的事情。
Below is code from that navigation page. I have attempted to put the tags in all 4 navigation containers at once and individually:
以下是该导航页面的代码。我尝试将标签一次单独放入所有 4 个导航容器中：
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
回答by Christina
There's only two directions of the navigation in Bootstrap, left or right. To center the navbar, there's a couple of methods. This is what I do for one of them. Following this are two example links:
Bootstrap 中只有两个导航方向，左或右。要使导航栏居中，有几种方法。这就是我为其中之一所做的。以下是两个示例链接：
@media (min-width:768px) {
/* centered navigation */
.nav.navbar-nav {
float: left;
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
}
.nav.navbar-nav li {
text-align: left
}
}
This is a modified version of the above. I have no idea what you're doing with the logo.
这是上述内容的修改版本。我不知道你在用这个标志做什么。
DEMO 1: http://jsbin.com/iJaJAzIM/3/
演示 1：http: //jsbin.com/iJaJAzIM/3/
http://jsbin.com/iJaJAzIM/3/edit?html,css,js,output
http://jsbin.com/iJaJAzIM/3/edit?html,css,js,output
This is another approach:
这是另一种方法：
@media (min-width:768px) {
.navbar > .container {
text-align: center;
}
.navbar-header {
float: none;
display: inline-block;
}
.navbar-brand {
float: none;
display: inline-block;
}
.navbar .navbar-nav {
float: none;
display: inline-block;
clear: none;
}
.navbar .navbar-nav > li {
float: none;
display: inline-block;
}
.navbar .navbar-nav > li li {
text-align: left
}
/*add id of centerednav on the collapse or it won't work*/
.collapse.navbar-collapse#centerednav {
float: none;
display: inline-block!important;
width: auto;
clear: none;
}
}
DEMO 2:http://jsbin.com/iJaJAzIM/6/
演示 2：http: //jsbin.com/iJaJAzIM/6/
http://jsbin.com/iJaJAzIM/6/edit
http://jsbin.com/iJaJAzIM/6/edit
回答by Ravimallya
If you want to make the navbar-navcenter, then you have to play a bit. Add the following style to it:
如果你想成为navbar-nav中锋，那你就必须打一点。向其添加以下样式：
.navbar-nav {
float: none;
margin: 0 auto;
display: table;
position: relative;
left: -135px; /* the width of the .navbar-brand class in negative px */
}
回答by jasonaibrahim
I've found that whenever I have trouble aligning an element exactly where I want it with bootstrap, add a position:relative and left:x%; or right:x%; and get it right to where you want it.
我发现每当我无法将元素与引导程序准确对齐时，请添加一个 position:relative 和 left:x%；或正确：x%；并把它放在你想要的地方。
An example:
一个例子：
<div class="navbar-collapse collapse" style="position:relative; left:{add-a-small-number-and-adjust-until-you-get-it-where-you-want-it}%;">
