twitter-bootstrap - 固定导航栏。如何正确管理其水平行为？

Question

我想在我的网站中放置一个固定的导航栏，但我在其水平行为方面遇到了一些问题。

如果我不让它“响应”，并且你有一个足够大的窗口，那么一切都很好：

但是如果我尝试缩小窗口，下面的所有内容都是可滚动的，除了我的导航栏将隐藏最右边的项目：

这不是我真正想要的行为！我只想访问我所有的导航栏元素。

接下来，我尝试使用响应式布局，仅用于我的固定导航栏。现在，当我缩小窗口时，一切似乎都很好：

但是如果我水平滚动我的内容，我的导航栏看起来很不美观，你可以在这里看到：

所以，我的问题是：有没有办法让响应式布局变得更好？我正在考虑在“收缩模式”下移动我的导航栏的 javascript。是否已经有经过测试的解决方案？否则：是否有针对无响应的固定导航栏的解决方案？

谢谢！

---

更新：这是我的代码

<div id="main-navbar" class="navbar navbar-fixed-top">
  <div class="navbar-inner collapsed">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="http://www.lifeparticipation.org/liquid.html" target="_blank">
        <div><img class="logo" id="logo" src="styles/imgs/logo.png"></div>
      </a>      

      <ul class="nav pull-right">
        <% if(typeof userName === "undefined"){ %>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user accedi"></i> Accedi <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#" class="loginFacebook"><span class="facebook">&nbsp;</span>facebook</a></li>                 
            </ul>
        </li>
        <% } else{ %>                                        
        <li class="dropdown" style="">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style=""><img style="height: 30px" class="img-rounded" src="<%=userPicURL %>" style=""> <%=userName %> <b class="caret" style="margin-top: 13px; padding-top: 0px;"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#" class="logout"><i class="icon-off"></i> Esci</a></li>                 
            </ul>
        </li>        
        <% } %>                             
      </ul><!-- <ul class="nav pull-right"> -->          
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
        <ul class="breadcrumb">
            <li><a href="#">Museo</a></li> 
        </ul>        
        </ul>
        <ul class="nav pull-right">   
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="styles/imgs/flags/it.png"> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><img src="styles/imgs/flags/it.png"> Italiano</a></li>
                    <li><a href="#"><img src="styles/imgs/flags/es.png"> Castellano</a></li>
                    <li><a href="#"><img src="styles/imgs/flags/galicia.png"> Galego</a></li>                    
                    <li><a href="#"><img src="styles/imgs/flags/pt.png"> Português europeu</a></li>                                        
                    <li><a href="#"><img src="styles/imgs/flags/eu.png"> English</a></li>                    
                </ul>
            </li>                                        
        </ul>
      </div><!--<div class="nav-collapse collapse">--> 
    </div><!--<div class="container">-->
  </div>
</div>  

这两张图片更好地描述了响应式导航栏和非响应式内容发生的情况：

尝试重现问题的 JSFiddle 可在此处获得

Answer 1

您需要包含bootstrap-responsive.css响应式导航栏才能正常工作。

这是使用来自 BootstrapCDN 的组合 Bootstrap CSS 的更新：http: //jsfiddle.net/PRVt6/1/

Answer 2

好吧，看来我做到了。

我只是溢出了我的引导响应 css 的 css 语句：

.navbar-fixed-bottom {
    position: fixed;
}

现在导航栏按照我想要的方式运行。当然有一个小问题：现在，当我展开折叠的导航栏时，它覆盖了我正常页面流程的一部分，但这对我来说没关系，因为我正在为相当大的屏幕尺寸（平板电脑、个人电脑和很快）。如果有人找到更聪明、更好的解决方案，我会很高兴看到它:-)