CSS 响应式引导程序导航栏中的中心内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18777235/
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 content in responsive bootstrap navbar
提问by Nick lK
I'm having trouble centering my content in the bootstrap navbar. I'm using bootstrap 3. I've read many posts, but the CSS or methods used will not work with my code! I'm really frustrated, so this is like my last option. Any help would be appreciated!
我无法将我的内容集中在引导程序导航栏中。我正在使用引导程序 3。我已经阅读了很多帖子，但是所使用的 CSS 或方法不适用于我的代码！我真的很沮丧，所以这就像我最后的选择。任何帮助，将不胜感激！
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
回答by hajpoj
I think this is what you are looking for. You need to remove the float: leftfrom the inner nav to center it and make it a inline-block.
我想这就是你要找的。您需要float: left从内部导航中删除 以使其居中并使其成为内联块。
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Edit:if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
编辑：如果您只希望在导航未折叠时发生此效果，请在适当的媒体查询中将其包围。
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
回答by Radu Rascol
The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this:
原来的帖子是询问如何将折叠的导航栏居中。要在普通导航栏上居中元素，请尝试以下操作：
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
回答by Eric S. Bullington
There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides.
对于不必将导航栏放在容器内并且不需要任何 CSS 或 Bootstrap 覆盖的布局，还有另一种方法可以做到这一点。
Simply place a div with the Bootstrap containerclass around the navbar. This will center the links inside the navbar:
只需container在导航栏周围放置一个带有 Bootstrap类的 div 。这将使导航栏中的链接居中：
<nav class="navbar navbar-default">
<!-- here's where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
If you want the then align body content to the center navbar, you also put that body content in the Bootstrap containertag.
如果您希望将正文内容与中心导航栏对齐，您还可以将该正文内容放在 Bootstrapcontainer标签中。
<div class="container">
<! -- body content here -->
</div>
Not everyone can use this type of layout (some people need to nest the navbar itself inside the container). Nonetheless, if you can do it, it's an easy way to get your navbar links and body centered.
不是每个人都可以使用这种类型的布局（有些人需要将导航栏本身嵌套在 中container）。尽管如此，如果你能做到，这是一种让你的导航栏链接和身体居中的简单方法。
You can see the results in this fullpage JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/
您可以在此整页 JSFiddle 中查看结果：http: //jsfiddle.net/bdd9U/231/embedded/result/
Source: http://jsfiddle.net/bdd9U/229/
回答by Shuhad zaman
This code worked for me
这段代码对我有用
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
回答by Zim
Update 2020...
2020 年更新...
Bootstrap 4
引导程序 4
Centering Navbar content is easier is Bootstrap 4, and you can see many centering scenarios explained here: https://stackoverflow.com/a/20362024/171456
Bootstrap 4 使导航栏内容居中更容易，您可以在此处看到许多居中场景：https: //stackoverflow.com/a/20362024/171456
Bootstrap 3
引导程序 3
Another scenario that doesn't seem to have been answered yet is centering boththe brand andnavbar links. Here's a solution..
这似乎并没有被仍不回答另一种情况是中心都在品牌和导航栏链接。这是一个解决方案..
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
http://codeply.com/go/1lrdvNH9GI
Also see: Bootstrap NavBar with left, center or right aligned items
回答by Hezy Ziv
For Bootstrap 4:
对于 Bootstrap 4：
Just use
只需使用
<ul class="navbar-nav mx-auto">
mx-auto will do the job
mx-auto 将完成这项工作
回答by NoZero
from the bootstrap official site (and, almost, like Eric S. Bullington said.
来自 bootstrap 官方网站（并且几乎就像 Eric S. Bullington 所说的那样。
https://getbootstrap.com/components/#navbar-default
https://getbootstrap.com/components/#navbar-default
the example navbar looks like:
示例导航栏如下所示：
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
to center the nav, that what i've done:
使导航居中，这就是我所做的：
<div class="container-fluid" id="nav_center">
css:
css：
@media (min-width:768px) { /* don't break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
work with class="container" and navbar-right or left, and of course you can replace id by class. :D
使用 class="container" 和 navbar-right 或 left，当然你可以用 class 替换 id。:D
回答by Tommy May
Seems like all these answers involve custom css on top of bootstrap. The answer I am providing utilizes only bootstrap so I hope it comes to use for those that want to limit customizations.
似乎所有这些答案都涉及引导程序之上的自定义 css。我提供的答案仅使用引导程序，因此我希望它可以用于那些想要限制自定义的人。
This was tested with Bootstrap V3.3.7
这是用 Bootstrap V3.3.7 测试的
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
回答by Govan
this should work
这应该有效
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
回答by The Coder
V4 of BootStrap is adding Center (justify-content-center) and Right Alignment (justify-content-end) as per: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
BootStrap 的 V4 正在添加中心（justify-content-center）和右对齐（justify-content-end），如下所示：https: //v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
