Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Bootstrap - menu się źle wyświetla
Forum PHP.pl > Forum > Przedszkole
elnino17
7.06.2014, 09:40:55
Wytam, mój problem wygląda nsstępująco, przerabiam sobie ten kurs https://www.youtube.com/watch?v=qpWlaOeGZ_4 Bootstrap. Robię wszystko po kolei i niby wszystko działa poza tym, że lista menu po zmianie widoku na mobile nie rozwija się pod nazwą strony tak jak to powinno być lecz pierwsza pozycja z menu(Home) jest równolegle z nazwą strony, przeglądałem kod klka razy i nie mogę znaleść rozwiązania

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<title>Bootstrap</title>
  5. 		<link href="css/bootstrap.min.css" rel="stylesheet">
  6. 		<link href="css/style.css" rel="stylesheet">
  7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. 	</head>
  10. 	<body>
  11.  
  12. 	<div class="navbar navbar-inverse navbar-static-top">
  13. 		<div class="container">
  14. 			<a htef="#" class="navbar-brand">Tech Site</a>
  15. 			<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
  16. 			<span class="icon-bar"></span>
  17. 			<span class="icon-bar"></span>
  18. 			<span class="icon-bar"></span>
  19. 			</button>
  20. 			<div class="collapse navbar-collapse navHeaderCollapse">
  21. 				<ul class="nav navbar-nav navbar-right">
  22. 					<li class="active"><a href="#">Home</a></li>
  23. 					<li><a href="#">Blog</a></li>
  24. 					<li><a href="#">About</a></li>
  25. 					<li class="dropdawn">
  26. 						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media<b class="caret"></b></a>
  27. 						<ul class="dropdown-menu">
  28. 							<li><a href="#">Facebook</a></li>
  29. 							<li><a href="#">Twitter</a></li>
  30. 							<li><a href="#">Google+</a></li>
  31. 							<li><a href="#">Instagram</a></li>
  32. 						</ul>
  33. 					</li>
  34. 					<li><a href="#">Adress</a></li>
  35. 				</ul>
  36. 			</div>
  37. 		</div>
  38. 	</div>
  39.  
  40.  
  41. 	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  42. 	<script src="js/bootstrap.min.js"></script>
  43. 	</body>
  44. </html>
[HTML] pobierz, plaintext
by_ikar
7.06.2014, 15:02:13
IMO nie wiem czy powinieneś się przejmować, dlatego że tylko przy testach sobie będziesz zwiększał/zmniejszał szerokość strony tak drastycznie żeby się przebić pomiędzy mobilną/desktopową wersją. Jeżeli ci to tak bardzo przeszkadza, to nadpisz klasę collapse w rozdzielczościach powyżej 768px szerokości dodając display: block, i trzeba by tam dodać pewnie wysokość jako auto. Mogło by to wyglądać tak:

Kod
@media (min-width: 768px) {
    .collapse {
        display: block;
        height: auto;
    }
}


Tyle że z racji że wysokość jest podawana jako atrybut, będziesz pewnie musiał dodać important, aby nadpisać ten css;
elnino17
8.06.2014, 08:02:36
nie wiem czy o to chodziło ale zrobiłem tak i nadal nie działa

/bootstrap.css
[HTML] pobierz, plaintext 
  1. @media (min-width: 768px) {
  2.   .lead {
  3.     font-size: 21px;
  4.   }
  5.   .collapse {
  6.         display: block;
  7.         height: auto !important;
  8.     }
  9. }
[HTML] pobierz, plaintext
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.