Pasek startowy 3 Zwiń pasek nawigacyjny

Czy jest jakiś sposób, aby zwiększyć punkt, w którym pasek nawigacyjny bootstrap 3 zwija się (tj. Tak, że zapada się w pozycji rozwijanej na tabletach portretowych)?

Te dwa dotyczyły bootstrap 2, ale nie teraz!

Jak zmienić próg zwinięcia paska nawigacyjnego za pomocą reagującego na ładowanie Twittera?

Zmień domyślny punkt przerwania odpowiadającego paska nawigacyjnego

Miałem dzisiaj ten sam problem.

Bootstrap 4

To natywna funkcjonalność: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Musisz użyć .navbar-expand{-sm|-md|-lg|-xl}klas:

<nav class="navbar navbar-expand-md navbar-light bg-light">

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

Wystarczy zmienić 991pxprzez 1199pxdo mdwielkości.

Próbny

Duża różnica między Bootstrap 2 i Bootstrap 3 polega na tym, że Bootstrap 3 jest „najpierw mobilny”.

Oznacza to, że domyślne style są zaprojektowane dla urządzeń mobilnych, aw przypadku pasków nawigacyjnych - oznacza to, że domyślnie „zwinął się” i „rozszerza”, gdy osiągnie określony minimalny rozmiar.

Witryna Bootstrap 3 zawiera „wskazówkę”, co zrobić: http://getbootstrap.com/components/#navbar

Dostosuj punkt zwijania

W zależności od zawartości paska nawigacyjnego może być konieczna zmiana punktu, w którym pasek nawigacyjny przełącza się między trybem zwiniętym a poziomym. Dostosuj zmienną @ grid-float-breakpoint lub dodaj własne zapytanie o media.

Jeśli zamierzasz ponownie skompilować LESS, w variables.lesspliku znajdziesz zanotowaną zmienną LESS . Obecnie jest ustawiony na „rozwijanie”, @media (min-width: 768px)co jest „małym ekranem” (tj. Tabletem) według terminów Bootstrap 3.

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

Jeśli chcesz trochę dłużej zwinąć, możesz to zmienić w następujący sposób:

@grid-float-breakpoint: @screen-desktop; (Punkt przerwania 992px)

lub rozwinąć wcześniej

@grid-float-breakpoint: @screen-phone (Punkt przerwania 480px)

Jeśli chcesz, aby rozwinął się później i nie zajmowałeś się ponownym kompilowaniem LESS, będziesz musiał zastąpić style stosowane w 768pxzapytaniu o media i pozwolić, aby powróciły do ​​poprzedniej wartości. Następnie dodaj je ponownie w odpowiednim czasie.

Nie jestem pewien, czy jest na to lepszy sposób. Ponowna kompilacja Bootstrap MNIEJ do swoich potrzeb jest najlepszym (najłatwiejszym) sposobem. W przeciwnym razie musisz znaleźć wszystkie zapytania o media CSS, które wpływają na pasek nawigacyjny, nadpisać je do domyślnych stylów o szerokości 768px, a następnie przywrócić je z powrotem na większą szerokość min.

Ponowna kompilacja LESS zrobi dla ciebie całą magię, zmieniając zmienną. Jest to w zasadzie sedno prekompilatorów LESS / SASS. =)

(uwaga: sprawdziłem je wszystkie, to około 100 linii kodu, co jest na tyle denerwujące, że porzuciłem pomysł i po prostu ponownie skompilowałem Bootstrap dla danego projektu i uniknąłem pomyłki)

Mam nadzieję że to pomogło!

Twoje zdrowie!

Najłatwiejszym sposobem jest dostosowanie bootstrapu

znajdź zmienną:

 @grid-float-breakpoint

który jest ustawiony na @ screen-sm, możesz go zmienić zgodnie ze swoimi potrzebami. Mam nadzieję, że to pomoże!

są one kontrolowane w zmiennych, nie ma potrzeby ukrywania się w źródle. z bootstrap, najpierw wypróbuj zmienne, a następnie zastąpi. potem wróć i spróbuj ponownie zmiennych;)

użyłem bootstrap-sass z szynami, ale to samo z domyślnym MNIEJ.

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";

Otóż ​​to! ta strona referencyjna zmiennych jest bardzo przydatna: https://github.com/twbs/bootstrap/blob/master/less/variables.less

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 zwinął się odpowiednio na prawidłowej szerokości, ale przycisk menu nie działał. Nie mogłem rozwinąć i zwinąć menu.

Wynika to z tego, że klasa collapse.in jest nadpisywana przez! Ważne w .navbar-collapse.collapse i może zostać rozwiązana przez dodanie również „collapse.in”. Przykład Seb33300 ukoń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 głosować i komentować odpowiedź jmbertucciego, ale nie mam jeszcze zaufania do elementów sterujących. Miałem ten sam problem i rozwiązałem go, jak powiedział. Jeśli używasz Bootstrap 3.0, edytuj zmienne LESS w zmiennych. Bez. Punkty odpowiedzi w odpowiedzi 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ść zwinięcia paska nawigacyjnego za pomocą zmiennej @ grid-float-breakpoint na około linii 232. Domyślnie jest ustawiona na @ screen-tablet . Jeśli chcesz, możesz użyć wartości w pikselach, ale ja wolę używać zmiennych LESS.

Jeśli napotykasz problem z podziałem menu na wiele linii , możesz wypróbować jedną z następujących czynności:

1) Spróbuj zmniejszyć liczbę pozycji menu lub ich długość, np. Usuwając pozycje menu lub skracając słowa.

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

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

Domyślne wypełnienie to 15 pikseli po obu stronach (lewej i prawej).

Jeśli wolisz zmienić każdą stronę, użyj:

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

To ustawienie wpływa również na listę rozwijaną.

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

Nabvar zawali się na małych urządzeniach. Punkt zwinięcia jest zdefiniowany przez @ grid-float-breakpoint w zmiennych. Domyślnie będzie to przed 768px. W przypadku 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 ponownie skompilować Bootstrap. Robiąc to, będziesz musiał zmienić @ screen-xs-max w navbar.less. Będziesz musiał ustawić tę wartość na nowy @ grid-float-breakpoint -1. Zobacz także: https://github.com/twbs/bootstrap/pull/10465 . Jest to potrzebne, aby zmienić formularze i menu nawigacyjne w punkcie przerwania @ grid-float na ich wersję mobilną.

Martwię się o problemy z konserwacją i aktualizacją w późniejszym czasie od dostosowywania Bootstrap. Mogę dziś udokumentować kroki dostosowywania i mam nadzieję, że osoba uaktualniająca Bootstrap za trzy lata znajdzie dokumentację i zastosuje ponownie kroki (które mogą, ale nie muszą działać w tym momencie). Podejrzewam, że argument można sformułować na dwa sposoby, ale wolę zachować wszelkie modyfikacje w kodzie.

Nie do końca rozumiem, jak może działać podejście Seb33300. Z pewnością nie działało to z Bootstrap 4.0.3. Aby pasek nawigacyjny rozwinął się przy 1200 zamiast 768, reguły dla obu zapytań o media muszą zostać zastąpione, aby zapobiec rozwijaniu przy 768 i wymusić rozwijanie przy 1200.

Mam dłuższe menu, które można owinąć na iPadzie w trybie pionowym. Poniższe polecenie powoduje zwinięcie menu aż 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 po mojej instalacji Bootstrap 3.0.0, ponieważ nie znam się tak LESS. Oto kod, który dodałem do mojego niestandardowego pliku css (który ładuję po bootstrap.css), który pozwolił mi kontrolować, więc menu zawsze działało jak accordion.
Uwaga: zawarłem całą navbarklasę w div z klasą, sidebaraby oddzielić pożądane zachowanie, aby nie miało to wpływu na inne paski nawigacyjne w mojej witrynie, takie jak menu główne. Dostosuj się do swoich potrzeb, mam nadzieję, że to pomoże.

/* 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 w mojej witrynie służy jako „podmenu” z boku.

Zmieniłam:

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

w:

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

A następnie dostosowany:

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

w:

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

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

A dla tych, którzy chcą zwinąć się na szerokości mniejszej niż standardowa 768px (rozwinąć na szerokości mniejszej niż 768px), potrzebne jest css:

@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 zmiany punktu przerwania zawalenia, tylko poprzez css.

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

Musisz zmienić wartości zapytania 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 zadziałało w moim bieżącym projekcie, ale wciąż muszę zmienić niektóre definicje css, aby odpowiednio ustawić menu dla wszystkich rozmiarów ekranu.

Mam nadzieję że to pomoże.