Question

我有使用this guide无响应的bootstrap模板，一切都很好。但是，当窗口大小较小时，顶部导航栏不会水平滚动。

问题的例子也是that page。如果我们挤压窗口大小比右上角的“链接”按钮不可访问。但指南本身说：

"Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content."
"There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element."

不需要响应功能，因为许多建议的解决方案使顶部导航栏的行为具有响应性。只是想从社区询问是否有任何解决方案可以使顶部导航栏与其余页面内容水平滚动。

以下是当前的HTML结构

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">.....</div>
        <div class="navbar-collapse collapse pull-right">.....</div>
    </div>
</div>

Answer 1

您可以使用一些jquery添加滚动事件来移动div，请参阅此http://www.bootply.com/YUULBM3T7h 而jquery是：

$(window).scroll(function(){
  $("#nav_div").css({"top": ($(window).scrollTop()) + "px"});
});

将您的HTML更改为：

<div id="nav_div" class="navbar navbar-default navbar-static-top"">
    <div class="container-fluid">
        <div class="navbar-header">.....</div>
        <div class="navbar-collapse collapse pull-right">.....</div>
    </div>
</div>

Answer 2

你试过overflow-x：滚动吗？参考here

在无响应的引导程序模板中使顶部导航栏水平滚动

2 个答案: