Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Boostrap navbar
Forum PHP.pl > Forum > Przedszkole
dolar
Witajcie. Czy jest tu ktos kto mi moze podpowiedziec dlaczego mi nie dziala na wszystkich ekranach ten navbar?
Tzn dziala na namniejszej (robi sie takie rozwijane menu ) i na monitorze na calej szerokosci , ale jak juz wejde tam np tabletem to zamiast mi sie navbar ladnie zmieniac dynamicznie i byc ciagle w jednej linii to linki w navbarze zaczynaja byc w dwoch liniach zamaist w jednej.
Co robie zle?

  1. <nav class="navbar navbar-default " role="navigation">
  2. <div class="container">
  3. <!-- Brand and toggle get grouped for better mobile display -->
  4. <div class="navbar-header">
  5. <button type="button" class="navbar-toggle" data-toggle="collapse"
  6. data-target="#bs-example-navbar-collapse-1">
  7. <span class="sr-only">Toggle navigation</span>
  8. <span class="icon-bar"></span>
  9. <span class="icon-bar"></span>
  10. <span class="icon-bar"></span>
  11. </button>
  12. <a class="navbar-brand" href="#">Twoje zdrowie</a>
  13. </div>
  14. <!-- Collect the nav links, forms, and other content for toggling -->
  15. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  16. <ul class="nav navbar-nav">
  17. <li>
  18. <a href="/#">Strona główna</a>
  19. </li>
  20. <li>
  21. <a href="#">Recepty</a>
  22. </li>
  23. <li>
  24. <a href="#">Nasi Lekarze</a>
  25. </li>
  26. @if(Auth::check())
  27. <li>
  28. <a href="#">Panel</a>
  29. </li>
  30. <li>
  31. <a href="#">Wyloguj</a>
  32. </li>
  33. @else
  34. <li>
  35. <a href="#">Login</a>
  36. </li>
  37. <li>
  38. <a href="#">Rejestracja</a>
  39. </li>
  40.  
  41. @endif
  42. </ul>
  43. </div>
  44. <!-- /.navbar-collapse -->
  45. </div>
  46. <!-- /.container -->
  47. </nav>


Wydaje mi sie ze nie dziala pomiedzy rozdzielczoscia 768 a 990. Wtedy menu sie zawija zamiast dostosowac.
gogomania
wujek google jak zwykle przydatny.
bootstrap-tablet
bostaf
Cały layout w Bootstrapie ma domyślne wartości szerokości, dla których elementy układu zaczynają się zawijać/rozwijać. Jak zajrzysz do sekcji o dostosowywaniu Bootstrapa (http://getbootstrap.com/customize) to zobaczysz całą stertę zmiennych, które w domyślnym pakiecie mają jakieś konkretne wartości. Te, które określają kiedy zawijać/rozwijać zdefiniowane saą w sekcji Grid system. Tam jest taka zmienna opisana jako Point at which the navbar becomes uncollapsed - nazywa się "@grid-float-breakpoint" i ma domyślną wartość "@screen-sm-min". Jak prześledzisz wstecz, to zobaczysz, że ta wartość to konkretnie 768px, przypisana do zmiennej "@screen-sm". Czyli że domyślnie, poniżej 768px szerokości navbar się zwinie a powyżej będzie rozwinięty.

Ta domyślna szerokość to konkretna wartość, a więc nijak się ma do ilości elementów w menu, które wiadomo mogą mieć różną szerokość. W Twoim layoucie jest już ich tyle, że zawijają się zanim navbar się zwinie.

Żeby to dostosować do swoich potrzeb, możesz zmienić tą domyślną wartość na własną i kliknąć tam na dole formularza dostosowywania Bootstrapa "Compile and download". Zwiększ ją trochę i sprawdź efekt. Jeśli nie pasuje to znów zwiększ i sprawdź. Zamiast konkretnej wartości w "@grid-float-breakpoint" możesz też wpisać nazwę innej zmiennej, np "@screen-md".

To wydaje mi się najprostsza i najpewniejsza metoda. Można też modyfikować te wartości własnym CSSem, tak jak w tym artykule od gogomania, ale nie bezmyślnie kopiując, tylko analizując co i dlaczego tam się dzieje, bo przy innej wersji Bootstrapa może zacząć się krzaczyć.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.