Bootstrap 3 Navbar Collapse

后端 未结 12 2177
长发绾君心
长发绾君心 2020-11-22 09:27

Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)?

These two were app

12条回答
  •  余生分开走
    2020-11-22 10:17

    I had the same problem today.

    Bootstrap 4

    It's a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

    You have to use .navbar-expand{-sm|-md|-lg|-xl} classes:

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

    Just change 991px by 1199px for md sizes.

    Demo

提交回复
热议问题