Bootstrap 3 Navbar Zwiń

Duża różnica między Bootstrap 2 a Bootstrap 3 polega na tym, że Bootstrap 3 jest "mobile first".

Oznacza to, że domyślne style są przeznaczone dla urządzeń mobilnych, a w przypadku Navbarów oznacza to, że domyślnie jest " zwinięty "i" rozszerza się", gdy osiągnie określony minimalny rozmiar.

Strona Bootstrap 3 faktycznie ma "podpowiedź" co zrobić: http://getbootstrap.com/components/#navbar

Dostosuj punkt załamania

W zależności w przypadku zawartości paska nawigacyjnego może być konieczna zmiana punktu przełączania paska nawigacyjnego między trybem zwiniętym a poziomym. Dostosuj zmienną @ grid-float-breakpoint lub Dodaj własne zapytanie o media.

Jeśli zamierzasz ponownie skompilować swój LESS, zauważysz zmienną LESS w pliku variables.less. Obecnie jest ustawiony na "expand" @media (min-width: 768px), który jest "małym ekranem"(tj. tablet) przez Bootstrap 3 terminy.

@grid-float-breakpoint: @screen-tablet;

Jeśli chcesz, aby upadł trochę dłużej można go dostosować w taki sposób:

@grid-float-breakpoint: @screen-desktop; (992px break-point)

Lub rozwiń wcześniej

@grid-float-breakpoint: @screen-phone (480px break-point)

Jeśli chcesz, aby został rozszerzony później i nie zajmował się ponowną kompilacją LESS, musisz nadpisać style, które zostaną zastosowane w zapytaniu o media 768px i przywrócić je do poprzedniej wartości. Następnie ponownie dodać je w odpowiednim czasie.

Rekompilacja LESS zrobi całą tę magię za Ciebie, zmieniając zmienną. Co jest w zasadzie sensem wstępnych kompilatorów LESS/SASS. =)

(Uwaga, sprawdziłem je wszystkie, to około 100 linijek kodu, co jest wystarczająco denerwujące, aby rzucić pomysł i po prostu ponownie skompiluj Bootstrap dla danego projektu i unikaj przypadkowego zepsucia czegoś)

Najprostszym sposobem jest dostosowanie bootstrap

Znajdź zmienną:

 @grid-float-breakpoint

Który jest ustawiony na @ screen-sm, możesz go zmienić zgodnie z własnymi potrzebami. Mam nadzieję, że to pomoże!

Są one kontrolowane w zmiennych, nie ma potrzeby grzebać w źródle. w przypadku bootstrap najpierw wypróbuj zmienne, a następnie nadpisuj. następnie wróć i spróbuj ponownie;)

Użyłem Bootstrap-sass z rails, ale to samo z domyślnym LESS.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

Dzięki Seb33300 mam to działa. Wydaje się jednak, że brakuje ważnej części. Przynajmniej w wersji Bootstrap 3.1.1.

Mój problem polegał na tym, że pasek nawigacyjny zapadł się odpowiednio przy odpowiedniej szerokości, ale przycisk menu nie działał. Nie mogłem rozwinąć i zwinąć menu.

To dlatego, że collapse.in klasa jest nadrzędna !ważne w .navbar-zwiń.zwijania, i może być rozwiązany poprzez dodanie "collapse.in". przykład Seb33300 zakończony poniżej:

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

Chciałem wypowiedzieć się i skomentować odpowiedź jmbertucciego, ale nie mam jeszcze zaufania do kontroli. Miałem ten sam problem i rozwiązałem go, jak powiedział. Jeśli używasz Bootstrap 3.0, edytuj mniej zmiennych w zmiennych.mniej responsywne punkty przerwania są ustawione wokół linii 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Następnie ustaw wartość zwijania dla paska nawigacyjnego za pomocą zmiennej @grid-float-breakpoint w linii 232. Domyślnie ustawiona jest na @ screen-tablet . Jeśli chcesz możesz użyć wartość piksela, ale wolę używać mniej zmiennych.

Jeśli problemem jest podział menu na wiele linii , Możesz spróbować jednej z następujących czynności:

1) Spróbuj zmniejszyć liczbę elementów menu lub ich długość, jak usunięcie elementów menu lub skrócenie słów.

2) zmniejszenie wypełnienia między elementami menu, jak to:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Domyślne padding to 15px po obu stronach (lewa i prawa).

Jeśli wolisz, aby zmienić każde indywidualne użycie boczne:

padding-left: 7px; 
padding-right: 8px;

To ustawienie wpływa na listę rozwijaną też.

To nie odpowiada na pytanie, ale może pomóc innym, którzy nie chcą zadzierać z CSS lub używać mniej zmiennych. Dwa wspólne podejścia do rozwiązania tego problemu.

Nabvar zapada się na małych urządzeniach. Punkt zwijania jest zdefiniowany przez @ grid-float - breakpoint w zmiennych. Domyślnie będzie to przed 768px. Dla ekranów poniżej szerokości ekranu 768 pikseli pasek nawigacyjny będzie wyglądał następująco:

Można zmienić @grid-float-breakpoint w zmiennych.less I przekompiluj Bootstrap. Podczas tego będziesz musiał zmienić @screen-xs-max w pasku nawigacyjnym.mniej. Musisz ustawić tę wartość na nową @grid-float-breakpoint -1. Zobacz też: https://github.com/twbs/bootstrap/pull/10465 . jest to potrzebne do zmiany formularzy i rozwijanych pasków nawigacyjnych w punkcie @ grid-float-breakpoint na ich wersję mobilną.

Martwię się o problemy z konserwacją i aktualizacją w trakcie dostosowywania Bootstrap. Mogę udokumentować kroki dostosowywania dzisiaj i mam nadzieję, że osoba aktualizująca Bootstrap za trzy lata znajdzie dokumentację i ponownie zastosuje kroki (które mogą, ale nie muszą działać w tym momencie). Argument może być tak czy inaczej, ale wolę zachować wszelkie dostosowania w moim kodzie.

Nie do końca rozumiem, jak podejście Seb33300 może działać. To na pewno nie działa z Bootstrap 4.0.3. Aby pasek nav rozszerzał się przy 1200 zamiast 768, reguły dla obu zapytań o media muszą zostać nadpisane, aby zapobiec rozszerzaniu przy 768 i wymusić Rozszerzanie przy 1200.

Mam dłuższe menu, które zawija się na iPadzie w trybie portretowym. Poniżej znajduje się menu zwinięte do punktu przerwania 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Zrobiłem CSS sposób z mojej instalacji Bootstrap 3.0.0, ponieważ nie jestem tak zaznajomiony z LESS. Oto kod, który dodałem do mojego niestandardowego pliku css (który Ładuję po bootstrap.css), który pozwalał mi kontrolować, więc menu zawsze działało jak accordion.
Uwaga: owinąłem całą navbar wewnątrz div z klasą sidebar, aby oddzielić zachowanie, które chciałem, aby nie wpływało to na inne paski nawigacyjne na mojej stronie, takie jak menu główne. Dostosuj się do swoich potrzeb, mam nadzieję, że jest to pomocy.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Dodatkowa uwaga: dodałem również zmianę do przełącznika menu głównego navbar (ponieważ powyższy kod na mojej stronie jest używany do "podmenu" z boku.

Zmieniłem:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Do:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

A następnie również skorygowane:

<div class="navbar-collapse collapse navbar-collapse">

Do:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Jeśli będziesz miał tylko jedną navbar myślę, że nie będziesz musiał się tym martwić, ale pomogło mi to w moim przypadku.

A dla tych, którzy chcą zwijać się o szerokości mniejszej niż standardowy 768px( rozwiń o szerokości mniejszej niż 768px), jest to css potrzebny:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Myślę, że znalazłem proste rozwiązanie do zmiany punktu załamania, tylko za pomocą css.

Mam nadzieję, że inni mogą to potwierdzić, ponieważ nie testowałem go dokładnie i nie jestem pewien, czy są skutki uboczne tego rozwiązania.

Musisz zmienić wartości zapytań o media dla następujących definicji klas:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

To działa dla mnie w moim obecnym projekcie, ale nadal muszę zmienić niektóre definicje css, aby odpowiednio ułożyć menu dla wszystkich ekranów rozmiary.