navbar fixed using Bootstrap.js

2019-08-22 23:29发布

问题:

I am working on a webapp which uses Backbone + Bootstrap as the css framework.

I am not able to set the navbar fixed to the top using Bootstrap in mobile browsers. As per Bootstrap all we need to do is add 'navbar-fixed-top' class in the navbar...but unfortunately its not working for me in mobile browsers but working in desktop browsers.

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>

回答1:

As of Bootstrap's v2.2.2 pushed in December 2012 fixed navbars do work on mobile using 'position: absolute'.



回答2:

Twitter Bootstrap does not support fixed navbars for mobile:

Fixed on mobile isn't consistently possible, nor does it behave well—not even on iOS5. You're free to override that if you wish, but we won't be re-enabling until support is improved. (@markdotto commenting this issue)