有什么方法可以增加引导3导航栏崩溃的点(即,它崩溃成一个下拉的肖像平板)?
这两个适用于引导2,但不是现在!
如何改变导航栏崩溃阈值使用Twitter引导响应?
更改默认的响应式导航栏断点
有什么方法可以增加引导3导航栏崩溃的点(即,它崩溃成一个下拉的肖像平板)?
这两个适用于引导2,但不是现在!
如何改变导航栏崩溃阈值使用Twitter引导响应?
更改默认的响应式导航栏断点
Bootstrap 2和Bootstrap 3的最大区别在于,Bootstrap 3是“移动优先”。
这意味着默认样式是为移动设备设计的,在导航栏的情况下,这意味着它在默认情况下是“折叠”的,当它达到一定的最小尺寸时是“展开”的。
Bootstrap 3的网站实际上有一个关于该怎么做的“提示”: http://getbootstrap.com/components/#navbar
自定义崩溃点 根据导航栏中的内容,您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加自己的媒体查询。
如果您要重新编译您的LESS,您将在变量中找到注意的LESS变量。更少的文件。它目前被设置为“扩展”@media (min-width: 768px),这是一个“小屏幕”(即。一个平板电脑)由Bootstrap 3项。
@grid-float-breakpoint: @screen-tablet;
如果你想保持折叠的时间长一点,你可以这样调整:
@grid-float-breakpoint: @screen-desktop;(992 px断点)
或者更快地扩张
@grid-float-breakpoint: @screen-phone (480px断点)
如果你想让它在以后展开,而不是重新编译LESS,你将不得不覆盖在768px媒体查询中应用的样式,并让它们返回到之前的值。然后在适当的时候重新添加它们。
我不确定是否有更好的办法。根据需要重新编译Bootstrap LESS是最好(最简单)的方法。否则,你将不得不找到所有的CSS媒体查询,影响你的导航栏,覆盖他们默认样式@ 768px宽度,然后恢复他们在一个更高的min-width。
重新编译LESS只需要改变变量就可以实现所有这些神奇的功能。这就是LESS/SASS预编译器的意义所在。=)
(注意,我确实把它们都查了一遍,大约有100行代码,这让我放弃了这个想法,只是为给定的项目重新编译Bootstrap,避免意外地搞砸一些事情)
最简单的方法是自定义引导
发现变量:
@grid-float-breakpoint
它被设置为@screen-sm,您可以根据您的需要更改它。 希望能有所帮助!
nabvar会在小型设备上崩溃。折叠点由变量中的@grid-float-breakpoint定义。默认情况下,它将在768px之前。对于屏幕宽度低于768像素的屏幕,导航栏看起来是这样的:
可以在变量中更改@grid-float-breakpoint。并重新编译引导程序。当这样做时,你还必须改变navbar.less中的@screen-xs-max。您必须将这个值设置为新的@grid-float-breakpoint -1。参见:https://github.com/twbs/bootstrap/pull/10465。这是需要改变导航栏形式和下拉菜单在@grid-float-breakpoint到他们的移动版本。
我用CSS的方式安装Bootstrap 3.0.0,因为我不太熟悉LESS。下面是我添加到我的自定义css文件(我在bootstrap.css后加载)的代码,它允许我控制,所以菜单总是像手风琴一样工作。 注意:我将整个导航栏与类边栏一起包装在一个div中,以分离出我想要的行为,这样它就不会影响我网站上的其他导航栏,比如主菜单。根据您的需要进行调整,希望对您有所帮助。
/* Sidebar Menu Fix */
.sidebar .navbar-nav {
margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.sidebar .navbar-collapse {
max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.sidebar .navbar-nav {
float: none;
}
.sidebar .navbar-nav > li {
float: none;
}
附加说明:我还对主菜单导航栏的切换进行了更改(因为我网站上的代码用于侧面的“子菜单”)。
我改变了:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
成:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">
然后调整:
<div class="navbar-collapse collapse navbar-collapse">
成:
<div class="navbar-collapse collapse navbar-collapse-topmenu">
如果你只有一个导航栏,我猜你不需要担心这个,但它在我的情况下帮助了我。
我想对jmbertucci的回答进行投票和评论,但我还不能被信任。我也遇到了同样的问题,并按照他说的解决了。如果你使用Bootstrap 3.0,编辑变量中的LESS变量。响应断点设置在第200行左右:
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
然后在第232行左右使用@grid-float-breakpoint变量为导航栏设置折叠值。默认设置为@screen-tablet。如果你愿意,你可以使用像素值,但我更喜欢使用LESS变量。
我今天也遇到了同样的问题。
引导4
它是一个本地功能:https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
你必须使用.navbar-expand{-sm|-md|-lg|-xl}类:
<nav class="navbar navbar-expand-md navbar-light bg-light">
引导3
@media (max-width: 991px) {
.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;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
只需更改md尺寸的991px * 1199px。
Demo
对于那些想要在小于标准768px的宽度处折叠(在小于768px的宽度处展开)的人,这是需要的css:
@media (min-width: 600px) {
.navbar-header {
float: left;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0 none;
box-shadow: none;
width: auto;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-nav {
float: left !important;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
我想我找到了一个简单的解决方案来改变折叠断点,只是通过css。
我希望其他人能确认,因为我没有彻底测试,我不确定这个解决方案是否有副作用。
您必须更改以下类定义的媒体查询值:
@media (min-width: BREAKPOINT px ){
.navbar-toggle{display:none}
}
@media (min-width: BREAKPOINT px){
.navbar-collapse{
width:auto;
border-top:0;box-shadow:none
}
.navbar-collapse.collapse{
display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
}
.navbar-collapse.in{
overflow-y:visible
}
.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
padding-left:0;padding-right:0
}
}
这是为我目前的项目工作,但我仍然需要改变一些css定义,以适当地安排所有屏幕大小的菜单。
希望这能有所帮助。
这些都是在变量中控制的,不需要在源代码中瞎折腾。使用自举,首先尝试变量,然后重写。然后返回并再次尝试变量;)
我使用bootstrap-sass与rails,但它与默认的LESS是一样的。
FILE: main.css.scss
-------------------
// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;
// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;
// then import your bootstrap
@import "bootstrap";
就是这样!这个变量参考页面非常方便:https://github.com/twbs/bootstrap/blob/master/less/variables.less
感谢Seb33300,我得到了这个工作。然而,一个重要的部分似乎被遗漏了。至少在Bootstrap 3.1.1版本中是这样。
我的问题是,导航栏在正确的宽度上相应地折叠,但菜单按钮不起作用。我无法展开和折叠菜单。
这是因为崩溃。In类被.navbar-collapse中的!important重写。也可以通过添加“Collapse .in”来解决。Seb33300的例子完成如下:
@media (max-width: 991px) {
.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-collapse.collapse.in {
display: block!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之后的维护和升级问题。我可以在今天编写定制步骤的文档,并希望三年后升级Bootstrap的人能够找到文档并重新应用这些步骤(在那时可能工作,也可能不工作)。我认为这两种方法都可以,但我更喜欢在代码中保留任何自定义。
不过,我不太明白Seb33300的方法是如何起作用的。当然,Bootstrap 4.0.3不能正常工作。为了使导航栏扩展到1200而不是768,必须重写媒体查询的规则,以防止扩展到768和强制扩展到1200。
我有一个更长的菜单,可以在iPad的纵向模式下自动换行。 下面将菜单一直折叠到1200断点:
@media (min-width: 768px) {
.navbar-header {
float: none; }
.navbar-toggle {
display: block; }
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 15px;
padding-left: 15px; }
.navbar-collapse.collapse {
display: none !important; }
.navbar-collapse.collapse.in {
display: block!important;
margin-top: 0px; }
}
@media (min-width: 1200px) {
.navbar-header {
float: left; }
.navbar-toggle {
display: none; }
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
display: block !important; }
}
如果您面临的问题是菜单分解成多行,您可以尝试以下方法之一:
1)尽量减少菜单项的数量或长度,如删除菜单项或缩短单词。
2)减少菜单项之间的填充,就像这样:
.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}
默认填充两边15px(左右)。
如果您更喜欢改变每个单独的用途:
padding-left: 7px;
padding-right: 8px;
此设置也会影响下拉列表。
这并没有回答问题,但它可以帮助那些不想乱动CSS或使用LESS变量的人。解决这个问题的两种常见方法。