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/

Answer 2

另一种使导航栏无响应的方法是提供.navbar固定宽度，例如600px。

如何在Twitter引导程序中使我的导航栏无响应

2 个答案: