Obecnie, gdy szerokość przeglądarki spada poniżej 768 pikseli, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę zmienić tę szerokość na 1000px, więc gdy przeglądarka jest poniżej 1000px, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę to zrobić bez użycia MNIEJ, używam rysika nie MNIEJ.
Mój problem jest taki sam, jak w tym pytaniu: Bootstrap 3 Zwiń pasek nawigacyjny
Ale wszystkie odpowiedzi w tych pytaniach wyjaśniają, jak to zrobić, zmieniając zmienną LESS. Nie miałem do czynienia z MNIEJ, używam rysika, więc chcę wiedzieć, jak można to zrobić za pomocą rysika lub innej metody.
Dzięki!
źródło
collapse
klasa jest ważna dla ekranu mobilnego, więc jeśli szerokość jest mniejsza niż 768px, pasek nawigacyjny będziedisplay:none
, więc wymagane działanie zostanie zastosowane wewnątrz znaku 768 i 1000 ...navbar-collapse.collapse
która madisplay: block !important
. Wyłączenie spowoduje, że przycisk zwinięcia nie pojawi się ... więc myślę, że jest wiele klas, które należy przedefiniować, nie tylkocollapse
AKTUALIZACJA 2018
Bootstrap 4
Zmiana punktu przerwania paska nawigacyjnego jest łatwiejsza w Bootstrap 4 za pomocą
navbar-expand-*
klas:<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= menu mobilne na ekranach xs <576pxnavbar-expand-md
= menu mobilne na ekranach sm <768pxnavbar-expand-lg
= menu mobilne na ekranach md <992pxnavbar-expand-xl
= menu mobilne na ekranach LG <1200pxnavbar-expand
= nigdy nie używaj menu mobilnego(no expand class)
= zawsze używaj menu mobilnegoJeśli wykluczysz,
navbar-expand-*
menu mobilne będzie używane przyall
szerokościach. Oto demo wszystkich 6 stanów paska nawigacyjnego : Bootstrap 4 Przykład paska nawigacyjnegoMożesz także użyć niestandardowego punktu przerwania (??? px), dodając trochę CSS. Na przykład tutaj jest 1300px ..
Bootstrap 4 Niestandardowy punkt przerwania paska nawigacyjnego
Bootstrap 4 Przykłady punktu przerwania paska nawigacyjnego
Bootstrap 3
W przypadku Bootstrap 3.3.x oto działający CSS, który zastępuje punkt przerwania paska nawigacyjnego. Zmień
991px
wymiar piksela w punkcie, w którym pasek nawigacyjny ma się zwinąć ...Przykład roboczy dla 991px: http://www.bootply.com/j7XJuaE5v6
Przykład roboczy dla 1200px: https://www.codeply.com/go/VsYaOLzfb4 (z formularzem wyszukiwania)
Uwaga: powyższe działa dla wszystkiego powyżej 768px . Jeśli trzeba zmienić na mniej niż 768px na przykład mniej niż 768px jest tutaj .
źródło
w bootstrap3 zmień tę zmienną @ grid-float-breakpoint na potrzebną. Wartość domyślna to 768px
źródło
@grid-float-breakpoint
jest zdefiniowany w kompilatorze: getbootstrap.com/customize - wartość domyślna to,@screen-sm-min
ale można ją zmienić na1234px
.W końcu opracowano sposób zmiany szerokości zwinięcia, bawiąc się „@ grid-float-breakpoint” na stronie http://getbootstrap.com/customize/ .
Przejdź do wiersza 2923 w pliku bootstrap.css (również w wersji minimalnej) i zmień
@media screen and (min-width: 768px) {
na@media screen and (min-width: 1000px) {
Tak więc kod skończy się na:
źródło
@grid-float-breakpoint
mojeresponsive.less
prace dla mnie!Właśnie to zrobiłem, używając następującego kodu CSS.
źródło
W kodzie źródłowym Bootstrap 3 .LESS zdefiniowana jest zmienna
variables.less
wywołana,@grid-float-breakpoint
która ma następujący pomocny komentarz:Dopasowana
@grid-float-breakpoint-max
wartość jest ustawiona na tę minus 1px:Rozwiązanie:
Więc
@grid-float-breakpoint
zamiast tego ustaw wartość na 1000px i przebudujbootstrap.less
wbootstrap.css
:na przykład
źródło
$ lessc bootstrap.less bootstrap.css
ale nic się nie stałogrunt dist
który zregeneruje katalog dist. Uruchomisz tę komendę z katalogu, w którym znajduje się plik gruntfile.js. Odniesienie: getbootstrap.com/getting-started/#gruntSposób Sass zmieniania zmiennych bootstrap jest faktycznie udokumentowany na stronie github bootstrap-sass .
Przedefiniuj zmienne przed @import bootstrap:
źródło
Oprócz odpowiedzi @Skely, aby menu rozwijane wewnątrz paska nawigacyjnego działały, dodaj także ich klasy, które mają zostać zastąpione. Końcowy kod poniżej:
kod demonstracyjny
źródło
W bootstrap v4 nawigacja może zostać zwinięta wcześniej lub później za pomocą różnych klas css
na przykład:
Za pomocą przycisku do nawigacji:
źródło
navbar-toggleable-sm
dla mnie,xs
sprawia, że nigdy się nie przełącza. Może to ja robię coś złego. Dzięki!W przypadku Bootstrap 3.3 jest to jedyny potrzebny kod:
źródło
To działało dla mnie Bootstrap3
Zajęło trochę czasu, aby dowiedzieć się o tych dwóch:
źródło
Najlepszym rozwiązaniem byłoby skorzystanie z portu używanego procesora CSS.
Jestem wielkim fanem SASS, więc obecnie używam https://github.com/thomas-mcdonald/bootstrap-sass
Wygląda na to, że jest tu widelec do rysika: https://github.com/Acquisio/bootstrap-stylus
W przeciwnym razie Search & Replace jest twoim najlepszym przyjacielem w wersji css ...
źródło
Cześć, myślę, że możesz to zrobić za pomocą CSS w ten sposób, możesz zmienić menu ładowania punktu początkowego
źródło
Paski nawigacyjne mogą korzystać z klas .navbar-toggler, .navbar-collapse i .navbar-expand {-sm | -md | -lg | -xl}, aby zmienić, gdy ich zawartość zawinie się za przyciskiem. W połączeniu z innymi narzędziami możesz łatwo wybrać, kiedy chcesz pokazać lub ukryć określone elementy.
W przypadku pasków nawigacyjnych, które nigdy się nie zwalniają, dodaj klasę .navbar-expand na pasku nawigacyjnym. W przypadku pasków nawigacyjnych, które zawsze się zwalniają, nie dodawaj żadnych klas .navbar-expand.
Na przykład :
Menu mobilne jest wyświetlane na dużym ekranie.
Odniesienie: https://getbootstrap.com/docs/4.0/components/navbar/
źródło
Oto, co zrobiło dla mnie lewę:
źródło
W bootstrap 4, jeśli chcesz przejechać, gdy navbar-expand- *, rozwija się i zwija oraz pokazuje i ukrywa hamburgera (navbar-toggler), musisz znaleźć ten styl / definicję w bootstrap.css i przedefiniować go w swoim własny customstyle.css (lub bezpośrednio w bootstrap.css, jeśli masz na to ochotę).
Na przykład. Chciałem, aby navbar-expand-lg zwinął się i pokazuje przełącznik navbar w 950px. W bootstrap.css znajduję:
A poniżej tego ...
Skopiowałem oba zapytania @media i umieściłem je w moim style.css, a następnie zmodyfikowałem rozmiar, aby dostosować go do moich potrzeb. W moim przypadku chciałem, aby zwinął się przy rozdzielczości 950 pikseli. Kwerendy @media muszą mieć różne rozmiary (tak mi się wydaje), więc ustawiłem maksymalną szerokość kontenera na 949.98px i użyłem 950px dla innego zapytania @media, więc poniższy kod został dołączony do mojego style.css. Niełatwo było oddzielić od skręconych rozwiązań, które znalazłem na Stackoverflow i gdzie indziej. Mam nadzieję że to pomoże.
źródło
Tutaj mój działający kod używa w React with Bootstrap
źródło
Jest teraz obsługiwany w Bootstrap 4.4
źródło