9

我是 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>
4

2 回答 2

17

该品牌是“居中”的，因为它位于容器 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">
         ...
于 2012-12-16T18:13:44.643 回答
12

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

只需替换<div class="container">by <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">
...
于 2014-10-15T22:32:04.920 回答