14

使用 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 宽而不是全宽 - 但当然它不再固定在页面顶部。如何将此导航栏固定在页面顶部而不使其变为全角？

4

5 回答 5

6

您可以创建一个 navbar-fixed-top 或 nav-bar-fixed-bottom ，而无需将其变为全宽并响应任何屏幕尺寸。

第 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>
于 2014-12-31T19:28:04.383 回答
5

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

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

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

于 2012-09-24T20:08:49.747 回答
2

您可以使用您的原始标记和简单的样式（使用类 'navbar' 到您需要的宽度：

.navbar {
width: 50%;
}

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

请参阅此处的教程：

http://www.webdesignforbeginners.info/bootstrap-simple-navbars/

于 2013-02-18T17:41:28.520 回答
0

如果您将导航栏包装在 a 中div， Bootstrap 3+ 应该能够为您处理动态宽度class，container那么宽度将根据可用空间是动态的。

请查看Bootstrap css部分以获取更多详细container信息。

于 2014-02-23T17:55:43.507 回答
0

汤米阮解决方案少。

.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;
  }
}
于 2016-02-23T21:49:59.917 回答