将 Twitter Bootstrap 框架顶部栏定位在页面顶部答案

【问题标题】：Position Twitter Bootstrap framework topbar to stay at top of page将 Twitter Bootstrap 框架顶部栏定位在页面顶部
【发布时间】：2011-11-05 01:45:11
【问题描述】：

所以，我正在使用 Twitter 的新 CSS 框架 Bootstrap。

我遇到的情况如下：我已将topbar div 添加到我的页面：

<div class="topbar">
      <div class="fill">
        <div class="container">
          <h3><a href="#">Project Name</a></h3>
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search">
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
              <a href="#" class="menu">Dropdown</a>
              <ul class="menu-dropdown">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
   </div>

但是，这有一些意外的行为：它继续在页面顶部向下浮动 - 例如 here。

有没有办法防止这种情况发生，还是我需要考虑不同的框架？

【问题讨论】：

我猜你已经有一段时间没有访问 twitter.com了...

标签： css twitter-bootstrap

【解决方案1】：

来自http://twitter.github.com/bootstrap/components.html#navbar

要将导航栏固定在视口的顶部，请将.navbar-fixed-top 添加到最外层的 div .navbar。在您的 CSS 中，您还需要通过将 padding-top: 40px; 添加到您的 <body> 来考虑它导致的重叠。

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

【讨论】：

【解决方案2】：

<div class="topbar">
  <div class="fill">
    <div class="container">
      <h3><a href="#">Project Name</a></h3>
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <form action="">
        <input type="text" placeholder="Search">
      </form>
      <ul class="nav secondary-nav">
        <li class="menu">
            <li class="dropdown" data-dropdown="dropdown" >
            <a href="#" class="menu">Dropdown</a>
              <ul class="menu-dropdown">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
          </li>
        </li>
      </ul>
    </div>
  </div>

【讨论】：

【解决方案3】：

你的意思是顶部栏总是在顶部？那是预期的行为。

你可以通过删除来改变它

position: fixed

在 topbar 的 CSS 定义中。

【讨论】：

我建议不要编辑 Twitter 样式表，而是创建自己的样式表来覆盖 twitter 样式。
如果可以避免，请不要编辑它。如果你不能，bootstrap-sass 非常适合编辑某些样式同时保持其他样式不变。