CSS 在不使用 LESS 的情况下更改引导程序导航栏折叠断点

Question

提问by Nearpoint

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.

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

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

我的问题与这个问题相同：Bootstrap 3 Navbar Collapse

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.

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

Thanks!

谢谢！

Answer 1

采纳答案by SaurabhLP

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

您必须为此编写特定的媒体查询，根据您的问题，低于 768 像素，导航栏将折叠，因此将其应用于 768 像素以上和 1000 像素以下，就像这样：

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

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.

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

Answer 2

回答by Zim

2018 UPDATE

2018年更新

Bootstrap 4

引导程序 4

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-*classes:

使用以下navbar-expand-*类在 Bootstrap 4 中更容易更改导航栏断点：

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

navbar-expand-sm= mobile menu on xs screens <576px
navbar-expand-md= mobile menu on sm screens <768px
navbar-expand-lg= mobile menu on md screens <992px
navbar-expand-xl= mobile menu on lg screens <1200px
navbar-expand= never use mobile menu
(no expand class)= always use mobile menu

navbar-expand-sm= xs 屏幕上的移动菜单 <576px
navbar-expand-md= sm 屏幕上的移动菜单 <768px
navbar-expand-lg= md 屏幕上的移动菜单 <992px
navbar-expand-xl= lg 屏幕上的移动菜单 <1200px
navbar-expand= 从不使用移动菜单
(no expand class)= 始终使用移动菜单

If you exclude navbar-expand-*the mobile menu will be used at allwidths. Here's a demo of all 6 navbar states: Bootstrap 4 Navbar Example

如果您排除navbar-expand-*移动菜单将用于all宽度。这是所有 6 种导航栏状态的演示：Bootstrap 4 Navbar Example

You can also use a custom breakpoint (???px) by adding a little CSS. For example, here's 1300px..

您还可以通过添加一些 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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 CustomNavbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

Bootstrap 4自定义导航栏断点
 Bootstrap 4 导航栏断点示例

Bootstrap 3引导程序 3

For Bootstrap 3.3.x, here is the workingCSS to override the navbar breakpoint. Change 991pxto the pixel dimension of the point at which you want the navbar to collapse...

对于 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;
  }
}

Working example for 991px: http://www.bootply.com/j7XJuaE5v6
Working example for 1200px: https://www.codeply.com/go/VsYaOLzfb4(with search form)

991px 的工作示例：http: //www.bootply.com/j7XJuaE5v61200px 的
工作示例：https: //www.codeply.com/go/VsYaOLzfb4（带有搜索表单）

Note: The above works for anything over 768px. If you need to change it to less than 768pxthe example of less than 768px is here.

注意：以上适用于超过 768px 的任何内容。如果您需要将其更改为小于 768px，则小于 768px的示例在此处。

Answer 3

回答by fengd

in bootstrap3, change this variable @grid-float-breakpointto the one you need. The default value is 768px

在bootstrap3 中，将此变量@grid-float-breakpoint更改为您需要的变量。默认值为 768px

Answer 4

回答by Stephen

Finally worked out how to change the collapse width by fiddling with '@grid-float-breakpoint' at http://getbootstrap.com/customize/.

终于找到了如何通过在http://getbootstrap.com/customize/摆弄“@grid-float-breakpoint”来改变折叠宽度。

Go to line 2923 in bootstrap.css(also min version) and change @media screen and (min-width: 768px) {to @media screen and (min-width: 1000px) {

转到 bootstrap.css（也是最小版本）中的第 2923 行并更改@media screen and (min-width: 768px) {为@media screen and (min-width: 1000px) {

So the code will end up being:

所以代码最终将是：

@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;
  }
}

Answer 5

回答by ruperto17

I just did this successfully by using the following CSS code.

我刚刚通过使用以下 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;
    }

}

Answer 6

回答by Gone Coding

In the Bootstrap 3 .LESS source code, there is a variable defined in variables.lesscalled @grid-float-breakpointwhich has the following helpful comment:

在 Bootstrap 3 .LESS源代码中，在variables.less调用@grid-float-breakpoint中定义了一个变量，它具有以下有用的注释：

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

The matching @grid-float-breakpoint-maxvalue is set to that minus 1px:

匹配@grid-float-breakpoint-max值设置为负 1px：

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solution:

解决方案：

So just set the @grid-float-breakpointvalue to 1000px instead and rebuild bootstrap.lessinto bootstrap.css:

所以只需将@grid-float-breakpoint值设置为 1000px 并重建bootstrap.less为bootstrap.css：

e.g.

例如

@grid-float-breakpoint: 1000px;

Answer 7

回答by tropicalfish

The Sass way of changing bootstrap variables is actually documented on the bootstrap-sassgithub page.

Sass 更改引导程序变量的方法实际上记录在bootstrap-sassgithub 页面上。

Just redefine the variables before you @import bootstrap:

只需在@import bootstrap 之前重新定义变量：

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Answer 8

回答by jacvalle

In addition to @Skely answer, to make dropdown menusinside the navbar work, also add their classes to be overriden. Final code bellow:

除了@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;
        }
    }

demo code

演示代码

Answer 9

回答by Eddie Jaoude

In bootstrap v4, the navigation can be collapsed sooner or later using different css classes

在 bootstrap v4 中，导航迟早可以使用不同的 css 类折叠

eg:

例如：

navbar-toggleable-sm
navbar-toggleable-md
navbar-toggleable-lg

导航栏-toggleable-sm
导航栏-可切换-MD
导航栏-toggleable-lg

With the button for the navigation:

使用导航按钮：

hidden-sm-up
hidden-md-up
hidden-lg-up

隐藏的sm-up
隐藏式
隐藏的lg-up

Answer 10

回答by Khaled

This worked for me Bootstrap3

这对我有用 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;
      }
}

Took a while to figure these two out:

花了一段时间才弄清楚这两个：

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

CSS 在不使用 LESS 的情况下更改引导程序导航栏折叠断点

提问by Nearpoint

采纳答案by SaurabhLP

回答by Zim

回答by fengd

回答by Stephen

回答by ruperto17

回答by Gone Coding

Solution:

解决方案：

回答by tropicalfish

回答by jacvalle

回答by Eddie Jaoude

回答by Khaled

相关推荐

最近更新

标签

CSS 在不使用 LESS 的情况下更改引导程序导航栏折叠断点

提问by Nearpoint

采纳答案by SaurabhLP

回答by Zim

回答by fengd

回答by Stephen

回答by ruperto17

回答by Gone Coding

Solution:

解决方案：

回答by tropicalfish

回答by jacvalle

回答by Eddie Jaoude

回答by Khaled

相关推荐

如何排除 CSS 格式？

CSS 针对不同屏幕尺寸的多个媒体查询

CSS 具有基于内容动态变化高度的div的webkit-transition高度？

自定义 css 被引导 css 覆盖

相关推荐

最近更新

标签