Skocz do zawartości

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


Gość Nowicjusz11
 Udostępnij

Rekomendowane odpowiedzi

Gość Nowicjusz11

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

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

Publikujesz jako gość. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.
Uwaga: Twój wpis zanim będzie widoczny, będzie wymagał zatwierdzenia moderatora.

Gość
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.

Ładowanie
 Udostępnij

×