Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Bootstrap] Dwie osobne listy dla dwóch różnych rozdzielczości
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
tzm
Spotkał się ktoś z czymś takim?

Powiedzmy że chciałbym ukryć .navbar-left w rozdzielczości @media(min-width:1060px) a .navbar-right w @media(min-width:768px), nie razem, osobno?

Było by miło za jakiś przykład jak kojarzycie, poziom angielskiego mnie weryfikuje w poszukiwaniach
Pyton_000
ustalasz dodatkowo max-width i tyle wink.gif
tzm
  1. body {
  2. padding-bottom: 20px;
  3. overflow:hidden;
  4. font-family: 'Alegreya Sans', sans-serif;
  5. font-weight: 900;
  6. text-transform: uppercase;
  7. background:grey;
  8. }
  9.  
  10. .navbar {
  11. margin-bottom: 20px;
  12. }
  13. @media (max-width: 1040px) {
  14. .navbar-header {
  15. float: none;
  16. }
  17. .navbar-right {
  18. float: none !important;
  19. }
  20. .navbar-toggle {
  21. display: block;
  22. }
  23. .navbar-collapse {
  24. border-top: 1px solid transparent;
  25. box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  26. }
  27. .navbar-fixed-top {
  28. top: 0;
  29. border-width: 0 0 1px;
  30. }
  31. .navbar-collapse.collapse {
  32. display: none!important;
  33. }
  34. .navbar-nav {
  35. float: none!important;
  36. margin-top: 7.5px;
  37. }
  38. .navbar-nav>li {
  39. float: none;
  40. }
  41. .navbar-nav>li>a {
  42. padding-top: 10px;
  43. padding-bottom: 10px;
  44. }
  45. .collapse.in{
  46. display:block !important;
  47. }
  48. }
  49. @media (max-width: 768px) {
  50. .navbar-left {
  51. float: none !important;
  52. }
  53. }
  54. .tattool-navbar{
  55. background:black;
  56. border:none;
  57. color:white;
  58. height:50px !important;
  59. }
  60. .project-navbar a{
  61. margin-left: 43px;
  62. color:white;
  63. font-weight: 900;
  64. font-size: 15px;
  65. -webkit-transition: color 0.2s ease-in-out;
  66. }
  67. .project-navbar a:hover{
  68. background:black !important;
  69. color:#de153d;
  70. }
  71. .navbar-nav > ul li:hover{
  72. }
  73. .navbar-toggle .icon-bar {
  74. background-color: white;
  75. }
  76. .navbar-brand{
  77. font-size: 30px !important;
  78. font-weight: 900;
  79. }
  80. .nav > li > a{
  81. padding-left:0 !important;
  82. }


Chyba czegoś nie ogarniam
grzes999
Coś takie spróbuj

  1. @media screen and (max-width: 1024px) {
  2. jakieś reguły
  3. }
hankos0
Witaj!
Moim zdaniem problem masz tu:
dla elementów .navbar-right, .navbar-left używasz float: none
jeśli chcesz ukryć element powinienieś użyć display:none;
tzm
Cytat(hankos0 @ 12.11.2014, 12:46:46 ) *
Witaj!
Moim zdaniem problem masz tu:
dla elementów .navbar-right, .navbar-left używasz float: none
jeśli chcesz ukryć element powinienieś użyć display:none;


Tak to robi bootstrap więc lepiej w to nie ingerować w moim zdaniem choć próbowałem, rozpieprza tylko menu..

edit:sugestie?
by_ikar
Do ukrywania w różnych rozdzielczościach, czy też odsłaniania, jakichś kontenerów w bootstrapie masz klasy: .visible-*-* oraz .hidden-* http://getbootstrap.com/css/#responsive-utilities jeżeli dodatkowo wygenerowałeś bootstrapa pod siebie, a nie nadpisałeś jego domyślnych klas na swoje, to będzie działać to podobnie do grida, tzn nazwy tych klas będą podobne, przykładowo:

  1. <div class="visible-xs-block"></div>


zawartość diva widoczna (jako element blokowy eg display: block;) będzie tylko w rozdzielczościach mniejszych niż 768px (domyślnie). Z kolei:

  1. <div class="hidden-xs"></div>


zawartość diva widoczna będzie w rozdzielczościach większych niż 768px (domyślnie).
tzm
dzieki. co prawda sobie inaczej z tym poradzilem i zrobilem mocny dirty work around ale na pewne ogarne temat ktory podrzuciles, mozliwe ze lepiej bedzie przy nastepnym update zrobic to zgodnie ze sztuka gdyby jednak mialy byc jakies problemy z moim rozwiazaniem.
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-2024 Invision Power Services, Inc.