html - 如何让我的导航栏在 Twitter bootstrap 上无响应

Question

我目前正在使用 Twitter Bootstrap 设计一个网页，在我的页面上，我想要一个附加到页面顶部的导航栏，当页面宽度减小时它会折叠，第二个导航栏固定到页面底部不会在页面缩小时折叠，因为它上面只会有一些社交媒体图标。

问题是我希望顶部导航栏响应，而底部导航栏不响应。

这在使用 Bootstrap 3 时是否可行，目前我对底部导航栏的了解如下:

<div class = "navbar navbar-inverse navbar-fixed-bottom">
    <div class = "container">
        <ul class = "nav navbar-nav navbar-right">
            <li><a href = "#">Home</a></li>
            <li><a href = "#">Blog</a></li>
            <li><a href = "#">Contact Us</a></li>
            <li><a href = "#">About</a></li>
        </ul>
    </div>
</div>  

Answer 1

只需从您的无序列表中删除 navbar-nav 并将 display:inline-block 添加到您的列表项中，如下所示:

HTML:

<div class = "navbar navbar-inverse navbar-fixed-bottom">
    <div class = "container">
        <ul class = "nav navBot">
            <li><a href = "#">Home</a></li>
            <li><a href = "#">Blog</a></li>
            <li><a href = "#">Contact Us</a></li>
            <li><a href = "#">About</a></li>
        </ul>
    </div>
</div>

CSS:

.navBot li  {
    display:inline-block;    
}

这是一个包含上述代码的 jsfiddle:https://jsfiddle.net/AndrewL32/e0d8my79/41/