Bootstrap: Wie man Navbar früher einstellt

Ich möchte Zusammenbruch meiner Navigationsleiste in früheren Auflösung als 768px, zum Beispiel 992px, wie soll ich das tun? danke! (Ich weiß, ich kann es anpassen, auf der bootstrap-Seite, aber ich will nicht mein Projekt immer wieder mit neuen bootstrap.css-Datei)

InformationsquelleAutor der Frage Edward | 2014-01-12

  1. 81

    Dies ist, was hat den trick für mich:

    @media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

    Fügen Sie diese in einer separaten CSS-Datei und schließen Sie Sie nach der bootstrap.css

    InformationsquelleAutor der Antwort Gerfried

  2. 9

    In variables.less ändern

    @grid-float-breakpoint:   @screen-sm-min

    zu 

    @grid-float-breakpoint: @screen-md-min;

    InformationsquelleAutor der Antwort barduro

  3. 7

    Wenn Sie brauchen, um Zusammenbruch Ihrer Navigationsleiste in früheren Auflösung als 768px so müssen Sie die Verwendung von @media - min-width und max-widthund Sie brauchen nicht zu starten, neues Projekt, dies zu tun, erstellen Sie einfach neue .css Datei ( Beispiel: custom.css) und der Einschub unter dem Haupt-bootstrap.css , überschreiben Sie die Werte. und schreiben Sie diesen code drin :

    CODE:

    @media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

    Können, können Sie auch einen Blick auf diesen Beitrag: ändern bootstrap navbar collapse.

    Ich hoffe, dies wird Ihnen die Lösung.

    InformationsquelleAutor der Antwort Ahmed Na.

  4. 4

    Können Sie überschreiben auch die bootstrap-Klassen, die Lücke zu schließen. Balg ist der Arbeits-code, überschreibt basic navbars mit dropdown-Menüs. Nicht alle Klassen überschrieben werden Balg, also je nachdem, was Sie verwenden, müssen Sie möglicherweise Vorrang vor anderen Klassen.

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

    klicken Sie hier für die live-demo-code

    InformationsquelleAutor der Antwort jacvalle

Schreibe einen Kommentar