Twitter bootstrap 导航栏固定在顶部，但不是全宽

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

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

如果我移除导航栏固定顶级：

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

到

---

然后导航栏看起来就像我希望的那样-只有940px宽而不是全宽-但是当然它不再固定在页面顶部。如何将导航栏固定在页面顶部而不使其变为全宽？

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

绝对

：

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

---

（如果您计划使用多个导航栏，请考虑为其提供一个ID）

您可以使用原始标记并简单地设置样式（使用类“导航栏”将其设置为所需的宽度：

.navbar {
width: 50%;
}

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

.navbar{
宽度：50%；
}

请参见此处的教程：

---

Bootstrap 3+应该能够为您处理动态宽度，如果您使用

容器的
类
将导航栏包装在
div
中，则宽度将根据可用空间动态变化

具体查看
容器
部分以了解更多详细信息。
您可以创建导航栏固定顶部或导航栏固定底部，而无需使其变为全宽并响应任何屏幕大小

步骤1：添加这些css：（我创建了一个名为：
.navbar fixed width
）的css类）

第二步：
.navbar固定宽度
像这样导航

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

汤米·阮解决方案的成本更低

.navbar-fixed-width {
  margin-left: auto;
  margin-right: auto;

  @media all and (min-width: @screen-sm-min) {
    width: @screen-sm-min;
  }

  @media all and (min-width: @screen-md-min) {
    width: @screen-md-min;
  }

  @media all and (min-width: @screen-lg-min) {
    width: @screen-lg-min;
  }
}

我必须添加“width:940px；”，否则导航栏会缩小到足以容纳其内容的大小。除此之外，它似乎还可以工作。谢谢！太好了！相应地更新了我的答案。尝试按照[this structure][1]，并将类容器流体转换为容器…[1]：这仅在导航栏不是
导航栏固定顶部
时有效。将
导航栏固定顶部
应用于现有导航栏（容器内）将导航栏固定在屏幕顶部，并将宽度更改为机身的100%。
<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation">
    <div class="container">
         <div class="navbar-header">
         </div>
    </div>
</div>

.navbar-fixed-width {
  margin-left: auto;
  margin-right: auto;

  @media all and (min-width: @screen-sm-min) {
    width: @screen-sm-min;
  }

  @media all and (min-width: @screen-md-min) {
    width: @screen-md-min;
  }

  @media all and (min-width: @screen-lg-min) {
    width: @screen-lg-min;
  }
}