Change bootstrap navbar collapse breakpoint without using LESS

前端 未结 19 2229
囚心锁ツ
囚心锁ツ 2020-11-22 07:55

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 navba

相关标签:
19条回答
  • 2020-11-22 08:22

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

        @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

    0 讨论(0)
  • 2020-11-22 08:22

    For Bootstrap 3.3 this is the only code you need:

    @media (min-width: 768px) and (max-width: 1000px) {
       .navbar-collapse.collapse {
           display: none !important;
       }
       .navbar-toggle{
            display: block !important;
       }
       .navbar-header{
            float: none;
       }
    }
    
    0 讨论(0)
  • 2020-11-22 08:24

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

    Just redefine the variables before you @import bootstrap:

    $grid-float-breakpoint: 1000px;
    
    @import 'bootstrap';
    
    0 讨论(0)
  • 2020-11-22 08:26

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

    0 讨论(0)
  • 2020-11-22 08:26

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

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

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

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

    Solution:

    So just set the @grid-float-breakpoint value to 1000px instead and rebuild bootstrap.less into bootstrap.css:

    e.g.

    @grid-float-breakpoint: 1000px;
    
    0 讨论(0)
  • 2020-11-22 08:26

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

    eg:

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

    With the button for the navigation:

    • hidden-sm-up
    • hidden-md-up
    • hidden-lg-up
    0 讨论(0)
提交回复
热议问题