Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Bootstrap - menu się źle wyświetla
elnino17
post 7.06.2014, 09:40:55
Post #1





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

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


Ten post edytował elnino17 7.06.2014, 13:48:06
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
by_ikar
post 7.06.2014, 15:02:13
Post #2





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

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;
Go to the top of the page
+Quote Post
elnino17
post 8.06.2014, 08:02:36
Post #3





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 02:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn