Pasek startowy 3 Zwiń pasek nawigacyjny

202

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

timhc22
źródło
Dlaczego nie mają zastosowania?
PW Kad
wydawało mi się, że sam kod został nieco zmieniony
timhc22,
Nie do końca podążam. Masz na myśli kod CSS? Klasy powinny być generalnie takie same z kilkoma drobnymi poprawkami
PW Kad
nie martw się, myślę, że byłem zdezorientowany z powodu niestandardowych pobrań (jedna z odpowiedzi zamieściłem link do określonego numeru wiersza do edycji)
timhc22
stackoverflow.com/a/23536146/563309 - pracował dla mnie, pomoże komuś ...
JenonD

Odpowiedzi:

335

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

Seb33300
źródło
21
Musiałem dodać, .navbar-collapse.collapse.in { display: block!important; }aby zapobiec zniknięciu. Dobra robota pozwoliła mi zaoszczędzić godziny.
Dave Forber
2
Świetna alternatywa, ale musiałem dodać .navbar-collapse.collapse.in {display: block! Ważne; margin-top: 0px; }
Mavis,
4
Podoba mi się to, że jeśli zaktualizuję Bootstrap, nie muszę się martwić o znalezienie zmiennej i jej rekompilację.
ScubaSteve,
6
ale listy rozwijane były nadal w trybie pulpitu, musiałem edytować kod w linii 3934 do max-with: 992 (w bootstrap.css), używam bootstrap 3.2. Na wypadek, gdyby ktoś tego potrzebował.
chandan
4
Wydaje się, że to nie obsługuje dropdown-menuelementów na pasku nawigacyjnym.
alexw
142

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!

jmbertucci
źródło
jaka jest różnica między wersjami domyślnymi bootstrap a wersjami niestandardowymi? Ich struktury folderów są zupełnie inne, a wersja dostosowana ma tylko pliki CSS i JS, ponieważ wersja domyślna ma wiele folderów, w tym LESS. Jestem trochę zmieszany.
Rahul Patwa,
1
@RahulPatwa Jeśli pobierzesz pełną wersję Bootstrap 3 Zip, otrzymasz wszystkie pliki programistyczne wraz z nią. Są to pliki, których ludzie używają do dalszego rozwijania Bootstrap i obejmują takie rzeczy, jak pliki robocze Composer i Grunt, pliki systemowe git, pliki LESS itp. Pełne pliki znajdują się w folderze / dist. Zobaczysz foldery /css, /js, /fonts. Dostosowanie powoduje tylko skompilowanie wybranych plików.
jmbertucci,
więc jeśli pobiorę pełny bootstrap, a następnie wprowadzę zmiany w mniejszej liczbie zmiennych. Jak skompilować to z powrotem do pliku CSS?
Rahul Patwa,
2
@RahulPatwa Istnieje wiele sposobów kompilacji MNIEJ. Witryna LESS wyjaśnia, w jaki sposób zarówno po stronie klienta, jak i serwera. Crunch to prosty GUI, którego możesz użyć. Witryna Bootstrap szczególnie zaleca korzystanie z narzędzia RECESS . I jest więcej .
jmbertucci,
9
Najłatwiejszym sposobem jest przejście na stronę getbootstrap.com/customize, aby ponownie zdefiniować wartość \ @ grid-float-breakpoint dla czegoś zakodowanego na stałe (np. 520px) lub dla mniejszego rozmiaru ekranu, takiego jak \ @ screen-xs-min
neves
34

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!

mshahbazm
źródło
2
Ustawienie bardzo małej wartości, np. 1px, spowoduje wyłączenie zwijania paska nawigacyjnego (np. Jeśli chcesz nie reagować na pasek nawigacyjny).
Gregor Slavec
Ustawiłem to również na „@ screen-xs-min”, aby ograniczyć zwinięte menu do 480px. W przypadku niektórych witryn działa to dobrze i daje przyjemny efekt, w którym można łatwo zmienić pełne menu do zwiniętego na iPhonie, zmieniając orientację.
chiappa
20

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

Doug Lee
źródło
1
Tak czysty. Świetne rozwiązanie. Dzięki.
Jedidiah Hurt
10

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;
    }
}
Daniel
źródło
prefekt standardowe rozwiązanie css dla bootstrap 3.3.6, dzięki!
xxxbence
7

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.

Bastardo Sucio
źródło
zwróć uwagę, że rozmiary są teraz przestarzałe, a pozostały tylko -minte: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;
Doug Lee
6

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.

PepitoSolis
źródło
3

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:

wprowadź opis zdjęcia tutaj

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ą.

Bass Jobsen
źródło
Jak korzystać z rysika? Czy korzystasz z github.com/Acquisio/bootstrap-stylus . W ostatnim przypadku powinieneś zrobić to samo co powyżej. Pobierz style bootstrap, zmień ustawienie w rysiku / zmiennych.styl itp. I ponownie skompiluj.
Bass Jobsen
3

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; }
}
Cdonner
źródło
1

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.

Markus
źródło
0

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;
}
}
Tony Day
źródło
0

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.

Cosmin
źródło