Html 引导3-显示所有屏幕尺寸的折叠导航

我正在使用引导v3

我有navbar类，这样当我有我的屏幕移动大小时，导航会折叠，并出现小的网格状切换按钮-所以这是预期的工作

我想要的是，这将是所有屏幕大小的默认操作。也就是说，即使在桌面上，我也希望导航被折叠，切换按钮可见

我已经浏览了css，有一大堆东西提供了功能，尽管我不知道要更改哪些部分

我尝试过对更大的媒体查询进行评论，尽管有很多这样的问题，而且似乎对其他样式有连锁反应

---

有什么想法吗？

您可以像这样使用覆盖默认引导CSS

    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

演示：

这将确保通过覆盖Bootstrap@media查询始终使用折叠的导航栏

更新：对于Bootstrap 4，您只需删除

导航栏togleable

类：

---

这对我来说很有用

访问：

找到：“更少的变量”-->“媒体查询断点”

更改：@屏幕lg值从1200px更改为1920px

定位：“网格系统”-->@网格浮点断点

更改：@screen sm min为@screen lg

滚动至页面末尾

点击“编译和下载”

提取并使用这些下载的文件。

这对我很有用：

.navbar-collapse.collapse {
    display: none!important;
}

如果您发现切换也有问题，请执行以下操作：

.navbar-collapse.collapse.in{
    display: block!important;
}

---

在

@grid float breakpoint

（网格系统->

@grid float breakpoint

->

100%

而不是

@screen sm min

）上添加100%值。

我发现的最简单的方法是更改变量.less文件并更改

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;

到

---

只有当你使用更少的ofc时。

想要节省时间，但它并不完美。我在最新的引导程序中遇到了一些问题，有一些不必要的代码，并且在下拉菜单中出现了

溢出

问题。此代码是我的最佳解决方案：

.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}

---

你能发一个链接到这个网站吗？不，对不起，是内部网站。不过，如果你看到标准的引导导航栏-这就是正在使用的。只需要将导航栏折叠起来，以适应所有媒体的大小。这可能会有所帮助：谢谢——这对我来说很有用。我在导航的底部有一个奇怪的灰色粗条，虽然我确信我能猜出那个部分。这对Bootstrap3.0.3很有效。在移动到3.3.2之后，需要将其添加到css中：.navbar-collapse.collapse.in{display:block！important；}。否则，当扩展时，它将被淹没并崩溃。@puddleglum您在哪里使用了css？您需要display:none来最初隐藏.navbar折叠。collapse@Rich-从上面skelly的答案开始，我只是在最后添加了它，并将其保存在一个单独的css文件中。可能需要添加一些解释，网格浮动断点为100%，它永远不会崩溃。这与他们想要的正好相反。这个修正有点疯狂。

.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}