Question

我是Bootstrap的新手，我一直在努力了解导航栏。我注意到当浏览器已满（宽屏）宽度时，品牌标题和导航锚定位于页面的左中心，而不是与页面的左侧对齐，就像窗口较小时一样。如何使导航栏中的文本拥抱页面左侧？无论浏览器窗口的宽度如何，我都希望能够将其固定在窗口的左侧。有没有特别的理由不这样做？

这是 live demo on jsFiddle 。请注意，如果您拉动手柄并尽可能向左扩展视口，文本最终将移向导航栏的中心。

我的导航栏标记与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>

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

也许有更简单的方法（至少使用最新版本的bootstrap）。

只需将<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">
...

如何调整Bootstrap导航栏中剩余的品牌标题和链接？

2 个答案: