固定导航栏。如何正确管理其横向行为？

Question

我想在我的网站上放置一个固定的导航栏，但我的横向行为遇到了一些问题。

如果我没有做出响应＆＃34;响应＆＃34;，并且你有一个足够大的窗口，一切都很好：

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

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

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

但是如果我水平滚动我的内容，我的导航栏似乎很反感，你可以在这里看到：

所以，我的问题是：有没有办法让响应式布局变得更好？我正在考虑在＆＃34;缩小模式＆＃34;时移动我的导航栏的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可用here

Answer 1

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

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

Answer 2

好吧，好像我做到了。

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

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

现在导航栏的行为方式与我想要的一样。当然有一个很小的问题：现在当我扩展我的折叠导航栏时，它覆盖了我正常的页面流的一部分，但这对我来说没问题，因为我正在设计我的网站只是为了相当大的屏幕尺寸（平板电脑，个人电脑和等等）。 如果有人找到更聪明，更好的解决方案，我会很高兴看到它： - ）