导航栏固定到顶部但不是全宽

Question

使用2.1.1 Twitter Bootstrap,我正在尝试创建一个固定在页面顶部但不是全宽的导航栏:

<div class="container">
  <div class="navbar 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>
    </div>
  </div>
</div>

如果我删除了navbar-fixed-top类:

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

至

  <div class="navbar">

然后导航栏最终看起来像我想要的那样 - 只有940px宽而不是全宽 - 但当然它不再固定在页面顶部.如何将此导航栏固定在页面顶部而不使其成为全宽？

Answer 1

您可以创建导航栏固定顶部或导航栏固定底部,而不会使其变为全宽并响应任何屏幕尺寸.

第1步:添加这些CSS(我创建一个名为CSS类:.navbar-fixed-width)

@media all and (min-width: 768px) {
  .navbar-fixed-width {
    width: 768px;
    margin-left: auto;
    margin-right:auto;
 }
}

@media all and (min-width: 992px) {
  .navbar-fixed-width {
    width: 992px;
    margin-left: auto;
    margin-right:auto;
  }

}

@media all and (min-width: 1200px) {
  .navbar-fixed-width {
    width: 1200px;
    margin-left: auto;
    margin-right:auto;
  }
}

第2步:.navbar-fixed-width像这样导航到类.

<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation">
    <div class="container">
         <div class="navbar-header">
         </div>
    </div>
</div>

Answer 2

您可以通过将Bootstrap设置为fixed来覆盖Bootstrap的定位 - absolute如果您不希望它与页面一起滚动,请使用它:

.navbar {
    position: fixed !important;
    top: 0px;
    width: 940px;
}

(如果您打算使用多个导航栏,请考虑给它一个ID)