如何調整Bootstrap導航欄中剩余的品牌標題和鏈接？

Question

我是Bootstrap的新手，我一直在努力了解導航欄。 我注意到當瀏覽器已滿（寬屏）寬度時，品牌標題和導航錨定位於頁面的左中心，而不是與頁面的左側對齊，就像窗口較小時一樣。 如何使導航欄中的文本擁抱頁面左側？ 無論瀏覽器窗口的寬度如何，我都希望能夠將其固定在窗口的左側。 有沒有特別的理由不這樣做？

這是關於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-fluid">替換<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">
...