如何对齐 Bootstrap 导航栏中留下的品牌标题和链接？

Question

我是 Bootstrap 的新手，我一直在努力了解导航栏。我注意到，当浏览器为全（宽屏）宽度时，品牌标题和导航锚点保持在页面的左侧中心，而不是像窗口较小时那样与页面的最左侧对齐。如何使导航栏中的文本紧贴页面左侧？无论浏览器窗口有多宽，我都希望能够使其粘在窗口的左侧。有什么特别的理由不这样做吗？

这里是 jsFiddle 上的 现场演示。请注意，如果拉动手柄并将视口尽可能向左加宽，文本最终将移向导航栏的中心。

我的导航栏标记与引导程序提供的入门演示相同，我知道响应式功能和图标没有连接在小提琴中，但是它们正在我的本地项目上工作并且与问题无关。我想我需要将文本对齐到我的自定义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>

Answer 1

品牌是“居中”的，因为它位于容器 div 内，并且该容器 div 始终居中，并且宽度根据视口或浏览器窗口的宽度而变化。

我建议你保持这种方式，因为它看起来更对称。如果您仍然想更改它，您只需从容器 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">
         ...

Answer 2

也许有更简单的方法来做到这一点（至少使用最新版本的引导程序）。

只需将

<div class="container">

替换为

<div class="container-fluid">

。

这将确保标题内容的容器跨越整个页面宽度。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <a class="brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
...

Answer 3

您还可以利用 .ms-auto 类将导航栏内容移动到右侧。这样您就可以将其包装起来。

<div class="navbar-nav ms-auto">Content to move to the far right</div>

你可以回顾这个大部分对我有用。