CSS Bootstrap 导航栏中心文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28150570/
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
Bootstrap Navbar Center Text
提问by Adam Fenwick
I have recently implemented a collapse bootstrap navbar to my website. However I have an issue with it when it is in its full form. The text is aligned to the left of the navbar and despite much CSS config, and browsing of stackoverflow none of the changes I have tried have been successful at all. I am trying to change the navbar so that the text/links within it are centralized.
我最近在我的网站上实现了折叠引导导航栏。但是，当它处于完整形式时，我遇到了问题。文本与导航栏的左侧对齐，尽管有很多 CSS 配置和浏览 stackoverflow，但我尝试过的任何更改都没有成功。我正在尝试更改导航栏，以便其中的文本/链接集中。
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a>
<li><a href="#home">Days Out</a></li>
<li><a href="#home">Ghosts</a></li>
<li><a href="#home">Beasts</a></li>
<li><a href="#home">History</a></li>
<li><a href="#home">About Us</a></li>
<li><a href="#home">Gifts</a></li>
<li><a href="#home">Blog</a></li>
<li><a href="#home">Contact Us</a></li>
</ul>
</div><!-- end collapse -->
</div>
回答by DaniP
You just need to change the floatbehavior of the navbar, try adding this styles:
您只需要更改float导航栏的行为，请尝试添加以下样式：
.navbar-collapse {
text-align:center;
}
.navbar-nav {
display:inline-block;
float:none;
}
BootplyDemo
BootplyDemo
回答by CChoma
Use media queries. It's the heart and soul of Bootstrap.
使用媒体查询。它是 Bootstrap 的核心和灵魂。
Since BS3's default breakpoint for collapsing the nav is at 767px. Why not define how you want it to behave above and below that point.
由于 BS3 折叠导航的默认断点是 767px。为什么不定义您希望它在该点之上和之下的行为方式。
One possible solution as such would be...
一种可能的解决方案是......
@media (min-width:768px) {
.navbar-collapse {
text-align:center;
}
}
@media (max-width:767px) {
.navbar-collapse {
text-align:left;
}
}
