Html 如何在 Bootstrap 导航栏中对齐品牌标题和链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13903981/
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
How to align brand title and links left in Bootstrap navbar?
提问by Cory Gross
I am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I'd like to be able to make it stick to the left of the window. Is there a particular reason not to do this?
我是 Bootstrap 的新手，我一直在努力了解导航栏。我注意到当浏览器为全（宽屏）宽度时，品牌标题和导航锚点保持在页面的左中心，而不是像窗口较小时那样对齐到页面的最左侧。如何使导航栏中的文本紧贴页面左侧？无论浏览器窗口有多宽，我都希望能够将其固定在窗口的左侧。有什么特别的理由不这样做吗？
Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.
这是一个关于 jsFiddle的现场演示。请注意，如果您拉动手柄并尽可能向左扩大视口，文本最终将移向导航栏的中心。
My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren't hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.
我的导航栏标记与 bootstrap 提供的入门演示相同，我知道响应式功能和图标没有连接到小提琴中，但是它们正在处理我的本地项目并且与问题无关。我想我需要文本对齐离开我的自定义 CSS，但是我尝试应用它失败了。任何帮助将非常感激。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="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>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
回答by ugo
The brand is "centered" because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.
品牌“居中”是因为它位于容器 div 内，并且此容器 div 始终居中，宽度取决于视口或浏览器窗口的宽度。
I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so:
我建议你保持这种方式，因为它使它看起来更对称。如果您仍然想更改它，您需要做的就是从容器 div 中删除品牌链接。像这样：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project name</a>
<div class="container">
<div class="nav-collapse collapse">
...
回答by Germain Chazot
Maybe there is simpler way to do this (with recent versions of bootstrap at least).
也许有更简单的方法来做到这一点（至少使用最新版本的引导程序）。
Just replace the <div class="container">by <div class="container-fluid">.
只需替换<div class="container">by <div class="container-fluid">。
This will make sure that the container for the content of your header spans the full page width.
这将确保标题内容的容器跨越整个页面宽度。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
...
