当前，当浏览器宽度下降到768px以下时，导航栏会变为折叠模式。我想把这个宽度改为1000px，这样当浏览器低于1000px时，导航栏就会变成折叠模式。我想这样做没有使用较少，我使用触控笔不是较少。
我的问题和这个问题一样:引导3导航栏崩溃
但所有这些问题的答案都解释了如何通过改变LESS变量来实现。我没有处理较少，我使用手写笔，所以我想知道如何使用手写笔或其他方法。
谢谢!
当前回答
最后通过在http://getbootstrap.com/customize/上摆弄“@grid-float-breakpoint”来解决如何改变折叠宽度的问题。
转到bootstrap.css(也是最小版本)的2923行，将@media screen和(min-width: 768px){改为@media screen和(min-width: 1000px) {
所以代码最终会是:
@media screen and (min-width: 1000px) {
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -15px;
}
.navbar-nav {
float: left;
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
}
.navbar-nav.pull-right {
float: right;
width: auto;
}
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
其他回答
这是我的工作代码。(也下拉导航栏链接工作)
@media (max-width: 1199px) {
.navbar-nav {
margin: 7.5px -15px;
}
.ul-links {
display: block;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
max-height: none;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
最好的办法是使用您所使用的CSS处理器的一个端口。
我是SASS的忠实粉丝，所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个Stylus的叉子:https://github.com/Acquisio/bootstrap-stylus
否则，搜索和替换是你最好的朋友在css版本…
你必须为此写一个特定的媒体查询，从你的问题，低于768px，导航栏会崩溃，所以应用它高于768px和低于1000px，就像这样:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
这将隐藏导航栏折叠，直到引导单元默认出现。当折叠类翻转内部资产在导航栏折叠将自动隐藏，明智的你必须设置你的css为你想要的设计。
嗨，我认为你可以这样做使用CSS 您可以更改断点引导菜单
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
在bootstrap 4中，如果你想覆盖navbar-expand-*，展开和折叠，显示和隐藏汉堡包(navbar-toggler)，你必须在bootstrap.css中找到那个样式/定义，并在你自己的customstyle.css中重新定义它(或者直接在bootstrap.css中，如果你愿意的话)。
如。我想让navbar-expand-lg折叠并显示navbar-toggler 在950 px。在bootstrap.css中我发现:
@media (max-width: 991.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
再往下……
@media (min-width:992px) {
... lots of styling ...
}
我复制了两个@media查询，并将它们粘在我的style.css中，然后修改大小以适应我的需要。在我的案例中，我想让它在950px处折叠。@media查询必须是不同的大小(我猜)，所以我设置容器的max-width为949.98px，并使用950px的另一个@media查询，所以下面的代码被追加到我的style.css。这并不容易从我在Stackoverflow和其他地方找到的扭曲解决方案中解脱出来。希望这能有所帮助。
@media (max-width: 949.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 950px) {
.navbar-expand-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
.navbar-expand-lg .dropup .dropdown-menu {
top: auto;
bottom: 100%;
}
}
