导航栏固定在顶部但不是全宽 [英] Navbar fixed to top but not full-width

问题描述

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

<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="容器"><a class="brand" href="#">项目名称</a><div class="nav-collapse collapse"><ul class="nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li></div><!--/.nav-collapse -->

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

到

然后导航栏最终看起来像我想要的那样 - 只有 940 像素宽而不是全宽 - 但当然它不再固定在页面顶部.我怎样才能让这个导航栏固定在页面顶部而不让它变成全角?

解决方案

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

.navbar {位置:固定！重要；顶部:0px；宽度:940px；}

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

Using the 2.1.1 Twitter Bootstrap, I'm trying to create a navbar that is fixed to the top of the page but which is not full width:

<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>

If I remove the navbar-fixed-top class:

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

to

  <div class="navbar">

then the navbar ends up looking the way I'd like it to - only 940px wide instead of full-width - but then of course it is no longer fixed to the top of the page. How can I keep this navbar fixed to the top of the page without having it become full-width?

解决方案

You can override Bootstrap's positioning by setting it to fixed - use absolute if you don't want it to scroll with the page:

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

(consider giving it an ID if you plan on using multiple navbars)

这篇关于导航栏固定在顶部但不是全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！