当前,当浏览器宽度低于 768 像素时,导航栏会变为折叠模式。我想将此宽度更改为 1000 像素,因此当浏览器低于 1000 像素时,导航栏将更改为折叠模式。我想在不使用 LESS 的情况下做到这一点,我使用的是手写笔而不是 LESS。
我的问题与这个问题相同:Bootstrap 3 Navbar Collapse
但是该问题中的所有答案都解释了如何通过更改 LESS 变量来做到这一点。我没有处理过 LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成。
谢谢!
当前,当浏览器宽度低于 768 像素时,导航栏会变为折叠模式。我想将此宽度更改为 1000 像素,因此当浏览器低于 1000 像素时,导航栏将更改为折叠模式。我想在不使用 LESS 的情况下做到这一点,我使用的是手写笔而不是 LESS。
我的问题与这个问题相同:Bootstrap 3 Navbar Collapse
但是该问题中的所有答案都解释了如何通过更改 LESS 变量来做到这一点。我没有处理过 LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成。
谢谢!
2018 更新
引导程序 4
navbar-expand-*
使用以下类在 Bootstrap 4 中更改导航栏断点更容易:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= xs 屏幕上的移动菜单 <576pxnavbar-expand-md
= sm 屏幕上的移动菜单 <768pxnavbar-expand-lg
= md 屏幕上的移动菜单 <992pxnavbar-expand-xl
= lg 屏幕上的移动菜单 <1200pxnavbar-expand
= 从不使用移动菜单(no expand class)
= 始终使用移动菜单如果您排除navbar-expand-*
移动菜单,则将使用all
宽度。这是所有 6 个导航栏状态的演示:Bootstrap 4 Navbar Example
您还可以通过添加一点 CSS 来使用自定义断点 (???px)。例如,这里是 1300px..
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .dropdown-menu {
position: absolute;
}
.navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4自定义导航栏断点
Bootstrap 4 导航栏断点示例
对于 Bootstrap 3.3.x,这里是覆盖导航栏断点的工作CSS。更改991px
为您希望导航栏折叠的点的像素尺寸...
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
991px 的工作示例:http: //www.bootply.com/j7XJuaE5v6
1200px
的工作示例:https ://www.codeply.com/go/VsYaOLzfb4 (带有搜索表单)
注意:以上适用于超过 768px的任何内容。如果您需要将其更改为小于 768px,小于 768px的示例在此处。
您必须为此编写一个特定的媒体查询,根据您的问题,低于 768 像素,导航栏将折叠,因此将其应用到 768 像素以上和 1000 像素以下,就像这样:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
这将隐藏导航栏折叠,直到默认出现引导单元。随着折叠类翻转导航栏内的内部资产折叠将自动隐藏,同样您必须根据需要设置您的 css 设计。
in bootstrap3, change this variable @grid-float-breakpoint to the one you need. The default value is 768px
终于弄清楚了如何通过在http://getbootstrap.com/customize/上摆弄“@grid-float-breakpoint”来更改折叠宽度。
转到 bootstrap.css(也是最小版本)中的第 2923 行并更改@media screen and (min-width: 768px) {
为@media screen and (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;
}
}
我刚刚通过使用以下 CSS 代码成功地做到了这一点。
@media(max-width:1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse {
overflow-x: visible !important;
}
.navbar-collapse.in {
overflow-y: auto !important;
}
.collapse.in {
display: block !important;
}
}
在 Bootstrap 3 .LESS源代码variables.less
中,在调用中定义了一个变量,该变量@grid-float-breakpoint
具有以下有用的注释:
//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
匹配@grid-float-breakpoint-max
值设置为负 1px:
//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
所以只需将@grid-float-breakpoint
值设置为 1000px 并重建bootstrap.less
为bootstrap.css
:
例如
@grid-float-breakpoint: 1000px;
Sass 更改引导变量的方式实际上记录在bootstrap-sass github 页面上。
只需在@import bootstrap 之前重新定义变量:
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
除了@Skely 回答,要使导航栏内的下拉菜单起作用,还要添加要覆盖的类。最终代码如下:
@media (min-width: 768px) and (max-width: 991px) {
.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;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
}
导航栏可以利用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 类在其内容折叠在按钮后面时进行更改。结合其他实用程序,您可以轻松选择何时显示或隐藏特定元素。
对于从不折叠的导航栏,在导航栏上添加 .navbar-expand 类。对于总是折叠的导航栏,不要添加任何 .navbar-expand 类。
例如 :
<nav class="navbar navbar-expand-lg"></nav>
移动菜单显示在大屏幕上。
这对我有用 Bootstrap3
@media (min-width: 768px) {
.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;
}
}
花了一些时间弄清楚这两个:
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
在 bootstrap v4 中,导航可以使用不同的 css 类迟早折叠
例如:
使用导航按钮:
对于 Bootstrap 3.3,这是您需要的唯一代码:
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
您最好的选择是使用您使用的 CSS 处理器的一个端口。
我是 SASS 的忠实粉丝,所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个 Stylus 的分支:https ://github.com/Acquisio/bootstrap-stylus
否则,搜索和替换是您在 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;
}
}
这是我的工作代码。(下拉导航栏链接也有效)
@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;
}
}
在 bootstrap 4 中,如果您想在 navbar-expand-*、展开和折叠以及显示和隐藏汉堡包(navbar-toggler)时覆盖,您必须在 bootstrap.css 中找到该样式/定义,并在您的拥有 customstyle.css(或者如果你愿意,直接在 bootstrap.css 中)。
例如。我希望 navbar-expand-lg 折叠并以 950px 显示 navbar-toggler。在 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 中,然后修改了大小以满足我的需要。我的情况是我希望它在 950 像素处折叠。@media 查询必须是不同的大小(我猜),所以我将容器最大宽度设置为 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%;
}
}
Bootstrap 4.4 现在支持它
navbar-expand-sm
这是我在 React with Bootstrap 中使用的工作代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
</style>
这就是我的诀窍:
@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}