如何使 Bootstrap 3 导航栏不可折叠答案

【问题标题】：How to make Bootstrap 3 navbar not collapsible如何使 Bootstrap 3 导航栏不可折叠
【发布时间】：2014-03-03 08:15:46
【问题描述】：

我已经搜索了很多，但仍然没有找到类似的东西。如果将navbar-collapse 替换为navbar，我得到的外观就像您切换了显示折叠菜单项按钮一样。我还发现了如何减少导航栏崩溃的断点的问题，但这不是我需要的。我需要的是通常删除可折叠菜单。有什么想法吗？

【问题讨论】：

在导航栏折叠时要隐藏的部分添加.hidden-sm怎么样？
您能否在评论或 JSFiddle 上添加一个最低工作（或不工作，在您的情况下）示例？这让我们更容易准确地看到问题所在。
dstest.atservers.net 这是测试站点。将窗口大小调整为

标签： javascript html css twitter-bootstrap

【解决方案1】：

由于响应式设计的工作方式，Bootstrap 会显示折叠的元素： CSS 代码是针对最小视口编写的，然后使用媒体查询，逐步增强设计以呈现每个特定视口的元素。

因此，负责显示“普通”导航栏（即中到大视口的导航栏）的 CSS 代码被包裹在 @media (min-width: 768px) 周围。这意味着，一旦您的视口低于该值，元素就会恢复到其原始设计，即小视口设计。

如果您不想更改this question 中建议的断点，您还有其他一些解决方案：

使用non-responsive Bootstrap library
通过研究 Bootstrap 中无响应的导航栏并复制相关代码来创建自己的导航栏。

【讨论】：

【解决方案2】：

您可以将导航栏链接放在navbar-header 中，然后添加一些CSS 来覆盖Bootstrap 的默认值..

.navbar-nav {
    margin:0;
}
.navbar-nav>li {
    float:none;
    display:inline-block;
}
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

演示：http://www.bootply.com/118426

替代（显示滚动条而不是换行）：http://www.bootply.com/118304

【讨论】：

【解决方案3】：

我遇到了这个问题，我刚刚解决了它

这将撤消折叠

/* Undo the collapsing navbar */
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0;
}

【讨论】：