在不使用 LESS 的情况下更改引导程序导航栏折叠断点 [英] Change bootstrap navbar collapse breakpoint without using LESS

问题描述

当前，当浏览器宽度低于 768 像素时，导航栏会更改为折叠模式.我想将此宽度更改为 1000 像素，因此当浏览器低于 1000 像素时，导航栏会更改为折叠模式.我想在不使用 LESS 的情况下做到这一点，我使用的是手写笔而不是 LESS.

Currently when the browser width drops below 768px, the navbar changes to collapsed mode. I want to change this width to 1000px so when the browser is below 1000px the navbar changes to collapsed mode. I want to do this without using LESS, I am using stylus not LESS.

我的问题与此问题相同:Bootstrap 3 Navbar Collapse

My issue is the same as in this question: Bootstrap 3 Navbar Collapse

但是这些问题中的所有答案都解释了如何通过更改 LESS 变量来做到这一点.我没有处理过 LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法完成此操作.

But all the answers in that questions explain how to do it by changing LESS variable. I haven't been dealing with LESS, I am using stylus so I want to know how this can be done using stylus or another method.

谢谢！

推荐答案

你必须为此编写一个特定的媒体查询，从你的问题来看，低于 768px，导航栏会崩溃，所以应用它高于 768px 低于 1000px，就这样:

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

这将隐藏导航栏折叠，直到引导单元默认出现.当折叠类翻转导航栏中的内部资产时，折叠将自动隐藏，同样明智的是，您必须根据需要设置您的 css.

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

这篇关于在不使用 LESS 的情况下更改引导程序导航栏折叠断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！