使用 Bootstrap.js 修复导航栏答案

【问题标题】：navbar fixed using Bootstrap.js使用 Bootstrap.js 修复导航栏
【发布时间】：2013-01-26 09:04:34
【问题描述】：

我正在开发一个使用 Backbone + Bootstrap 作为 css 框架的 webapp。

我无法在移动浏览器中使用 Bootstrap 将导航栏设置为固定在顶部。根据 Bootstrap，我们需要做的就是在导航栏中添加“navbar-fixed-top”类……但不幸的是，它在移动浏览器中对我不起作用，但在桌面浏览器中起作用。

HTML

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" style="text-align:center">
    <div class="colL pull-left">
        <a href="/#back" id="back-btn" class="btns angular_btn pull-left" style="display:none"><span>Back</span></a>
        <a href="/#control_back" id="control-back-btn" class="btns angular_btn pull-left" style="display:none"><span>Back</span></a>
    </div>
    <div class="colR pull-right">
        <a class="btns pull-right" id="home" style="display: none" href="/#home" data-toggle="tab">Home</a>
        <a href="/#controls" id="controls" class="btns pull-right" data-toggle="tab">Now Playing</a>
    </div>
    <div class="colC">
        <div id="show_name"></div>
    </div>
  </div>
</div>

【问题讨论】：

我假设您使用的是 scrollspy？
老实说，如果您不提供任何代码，我认为没有人可以帮助您。
不...我只使用 Bootstrap 框架
好吧，我看不出有什么问题。也许是你的css，你可能在引导后加载了你的css，并覆盖了一些东西？尝试删除除导航栏以外的所有内容，看看它是否粘在顶部。
是的，我已经尝试过了...通过删除除导航栏以外的所有内容...并且效果很好。另请注意，没有可以覆盖它的内联 css。

标签： css twitter-bootstrap css-position

【解决方案1】：

自 2012 年 12 月推出的 Bootstrap 的 v2.2.2 起，固定导航栏确实可以使用“位置：绝对”在移动设备上工作。

【讨论】：

【解决方案2】：

Twitter Bootstrap 不支持移动设备的固定导航栏：

固定在移动设备上并不总是可行的，它的表现也不好——甚至在 iOS5 上也不行。如果您愿意，您可以随意覆盖它，但在改进支持之前我们不会重新启用。（@markdotto 评论this issue）

【讨论】：

我尝试删除除导航栏以外的所有内容，它在移动设备上运行良好。