Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Strona za pomocą boostrap. Div najeżdża na drugi po zmniejszeniu okna


Rekomendowane odpowiedzi

Hej, tworzę dla nauki prostą stronkę z pomocą boostrapa.

Wygląda to tak że układ na pełnym ekranie jest super (1920x1080) ale po resize okna przeglądarki jeden div wjeżdża w drugiego.
Wiecie może jak na to zaradzić?

Będę wdzięczny.

Kod index
 

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
	<div class="container">
    <div class="row">
    	<div class="col-md-12"><div id="header">header</div></div>
	    	<div class="col-md-2"><div id="ads-left">ads-left</div></div>
	        <div class="col-md-8"><div id="main">main</div></div>
	        <div class="col-md-2"><div id="ads-right">ads-right</div></div>
    </div>
</div>
</body>
</html>

Kod CSS:

 

body {
	background-color: rgb(35,35,35);
	color: white;
	font-family: 'Raleway', sans-serif;
}

#header {
	background-color: rgb(32,32,32);
	width: auto;
	height: 130px;
	margin-top: 2%;
	margin-bottom: 2%;
}

#main {
	width: auto;
	min-height: 1600px;
	height: auto;
	background-color: rgb(32,32,32);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5%;
}

#ads-left {
	width: 180px;
	height: 550px;
	position: fixed;
	background-color: rgb(32,32,32);
}
#ads-right {
	width: 180px;
	height: 550px;
	position: fixed;
	background-color: rgb(32,32,32);
}

W boostrapie nic nie zmieniałem.

image

image

image

image

Odnośnik do komentarza
Udostępnij na innych stronach

row = rząd - czyli do .row nie dajemy elementów które powinny być w kolejnym rzędzie

Do efektu scrollowania reklam (.ads) użyłem tego skryptu: Sticky Plugin

Odnośnik do komentarza
Udostępnij na innych stronach

Dla nauki naucz się pierw html i css dobrze, ucząc się chociaż takich pojęć jak position:absolute ,position:relative, display:block itd. bo jak dodaje bootstrapa do w divach nie ustawiasz im wartości width i height to już zależy, tylko co-md-6 itd = chociaż by to robi i tworzy to tak aby zrobiła się cała siatka bootstrapa. Polecam pasja informatyk na yt.

Odnośnik do komentarza
Udostępnij na innych stronach

Dołącz do dyskusji

Gość
Niestety, Twoja zawartość zawiera warunki, na które nie zezwalamy. Edytuj zawartość, aby usunąć wyróżnione poniżej słowa.
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...