4

我正在尝试使用 Bootstrap 构建一个站点。到目前为止，一切都按计划进行。我想要一个固定的导航栏，我正在使用内置函数：

<div class="navbar navbar-fixed-top">

这很好，正是我需要的，但我希望导航和标题从与容器相同的位置开始，而不是一直到左/右（导航栏的宽度仍然为 100%。我试图在导航栏中放置一个容器，这不是正确的解决方案:-)

4

2 回答 2

9

例子

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" 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>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="./index.html">Home</a>
              </li>
              <li>
                <a href="./getting-started.html">Get started</a>
              </li>

              ...

              <li>
                <a href="./customize.html">Customize</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

或扔

.navbar { 
    max-width: 1170px; /* width of .container */
    margin: 0 auto;
}

进入CSS

于 2013-07-08T18:05:41.047 回答
1

您应该在导航栏中嵌套一个容器类

<div class="navbar navbar-fixed-top">
   <div class="container">your menu and logo go here</div>
</div>

如果您没有流畅的布局，这将为您提供与正文容器相同的宽度，并将为容器提供自动边距，使其位于屏幕中间。它还将使导航栏本身保持在 100%

于 2013-07-08T18:11:22.053 回答