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
Odpowiedzi:
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:Bootstrap 3
Wystarczy zmienić
991px
przez1199px
domd
wielkości.Próbny
źródło
.navbar-collapse.collapse.in { display: block!important; }
aby zapobiec zniknięciu. Dobra robota pozwoliła mi zaoszczędzić godziny.dropdown-menu
elementów na pasku nawigacyjnym.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
Jeśli zamierzasz ponownie skompilować LESS, w
variables.less
pliku 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
768px
zapytaniu 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!
źródło
/css
,/js
,/fonts
. Dostosowanie powoduje tylko skompilowanie wybranych plików.Najłatwiejszym sposobem jest dostosowanie bootstrapu
znajdź zmienną:
który jest ustawiony na @ screen-sm, możesz go zmienić zgodnie ze swoimi potrzebami. Mam nadzieję, że to pomoże!
źródło
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.
Otóż to! ta strona referencyjna zmiennych jest bardzo przydatna: https://github.com/twbs/bootstrap/blob/master/less/variables.less
źródło
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:
źródło
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:
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.
źródło
-min
te: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;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:
Domyślne wypełnienie to 15 pikseli po obu stronach (lewej i prawej).
Jeśli wolisz zmienić każdą stronę, użyj:
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.
źródło
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ą.
źródło
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:
źródło
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łą
navbar
klasę w div z klasą,sidebar
aby 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.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:
w:
A następnie dostosowany:
w:
Jeśli będziesz miał tylko jeden
navbar
, myślę, że nie musisz się tym martwić, ale pomogło mi to w moim przypadku.źródło
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:
źródło
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:
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.
źródło