» »

Bootstrap težave pozicioniranja

Bootstrap težave pozicioniranja

marjan_h ::

Komaj sem začel uporabljati bootstrap, vendar ne vem kako narediti, da ko skrčim okno brskalnika, da je logotip zgoraj, potem se pa uredijo itemi (li značka) v meniju, eden za drugim vertikalno.

Pobrisal sem vso bootstrap kodo zato, da je bolj pregledno. Razred inner-meni, bi rad da je 65% ko je prikazano na računalniškem monitorju. Tukaj sem tudi pustil razred row, saj je to eden elementov bootstrapa. Poskusil sem narediti row znotraj row, vendar se vse skupaj podre.

Tukaj je koda:

<html>	
	<head>
		<style>
		
			.inner-meni {
				width:65%;
				height:145px;
				margin-left: auto;
				margin-right: auto;
				border: 1px solid gray;
			}
			
			.logo {
				background: url(logo.png) 50% 0 no-repeat;
				border: 1px solid red;
				min-height: 142px;
				width:200px;
				background-size: 200px 145px;
				min-width: 200px;
				float: left;
			}
			
			#slogmeni {
				height: 142px;
				padding-top:75px;
				float: left;
			}

			#slogmeni > ul {
				display: flex;
				margin: 0;
				padding: 10px 20px;
				border: 1px solid blue;
				float: left;
			}

			#slogmeni > ul > li {
				display: flex;
				margin-left: 30px;
			}

			#slogmeni > ul > li:first-of-type {
				margin-left: 0;
			}

			#slogmeni > ul > li > a {
				outline: none;
				font-size: 25px;
				display: flex;
				padding: 10px 1px;
				color: black;
			}
			
		</style>
	</head>



		<header>
			<div class="inner-meni row">
				<div class="logo"></div>			
				<nav>
					<div id="slogmeni" class="menu">
						<ul id="menu-primarni-glavni-meni" class="menu">
							<li id="item" class="menu-item"><a href="#">O znamki</a></li>
							<li id="item" class="menu-item"><a href="#">Zgodovina</a></li>
							<li id="item" class="menu-item"><a href="#">Za goste</a></li>
							<li id="item" class="menu-item"><a href="#">Za organizacije</a></li>
						</ul>
					</div>				
				</nav>
				
			</div>	
		</header>
</html>




Tole ni za službo, niti za šolo, ampak zato da se naučim uporabljati tudi to knjižnico. (Zato sem pustil tudi robove (border)).

Se zahvaljujem za pomoč.

kuall ::

Najprej vključi boostrap.css.
Potem pa je bistvo bootstrapa container - row - column sistem
container: z njim daš elemente v center strani, pa lahko je full width ali z robovi na straneh
row: ena vrstica
column: določa, koliko vrstic bo v eni vrstici v različnih velikostih ekranov.
vsi ekrani imajo 12 enot širino. potem pa ko pride saldo/sum/seštevek širin prejšnjih kolon več kot 12 se prelomijo kolone v novo vrstico.
Primer, ki določa, da bodo v majhnih zaslonih (sm) 2 koloni na vrstico, v velikih pa 4:
<div clas="container">
<div class="row">
<div class="col-sm-6 col-lg-3"></div>
<div class="col-sm-6 col-lg-3"></div><!--tu se prelomi v novo vrstico v malih zaslonih-->
<div class="col-sm-6 col-lg-3"></div>
<div class="col-sm-6 col-lg-3"></div>
</div>
</div>

Če pa bi hotel, da so tudi v malih zaslonih 4 kolone v vrstici bi jim dal "col-sm-3" stil. Samo ena pa bi ji dal col-sm-12.
V bistvu določaš širino kolon v različnih velikostih zaslonov z bootstrapom. Pol ima pa še razne dodatke.
Drgač pa so za responsive strani zelo važne media queries. to je za telefone zdej pomembno.
@media (min-width: @screen-sm-min) { ... }
Z njimi customiziraš stile za različne velikosti zaslonov.
Če hočeš povečat font, velkost gumbov na telefonih npr.

Zgodovina sprememb…

  • spremenilo: kuall ()

marjan_h ::

Hvala kuall. Sedaj imam takole, ne vem če je pametno da sem dal razred "col-sm-6" ne div znački, ampak nav znački. Problem nastane pri oblikovanju, ker nimam več iste oblike kot v prejšnjem primeru. Ne vem kako se reši problem, da ostane oblikovanje kot sem določil v CSS, pozicijo elementov pa takšno kot je določeno v bootstrap.

<html>	
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style>
		
			.inner-meni {
				width:65%;
				height: auto;
				margin-left: auto;
				margin-right: auto;
				border: 1px solid gray;
			}
			
			.logo {
				background: url(logo.png) 50% 0 no-repeat;
				border: 1px solid red;
				min-height: 142px;
				width:200px;
				background-size: 200px 145px;
				min-width: 200px;
				float: left;
			}
			
			#slogmeni {
				height: 142px;
				padding-top:75px;
				float: left;
			}

			#slogmeni > ul {
				display: flex;
				margin: 0;
				padding: 10px 20px;
				border: 1px solid blue;
				float: left;
			}

			#slogmeni > ul > li {
				display: flex;
				margin-left: 30px;
			}

			#slogmeni > ul > li:first-of-type {
				margin-left: 0;
			}

			#slogmeni > ul > li > a {
				outline: none;
				font-size: 25px;
				display: flex;
				padding: 10px 1px;
				color: black;
			}
			
		</style>
	</head>



		<header>
			<div class="inner-meni row">
				<div class="logo col-sm-6 col-lg-3"></div>			
				<nav class="col-sm-6 col-lg-3">
					<div id="slogmeni row" class="menu">
						<ul id="menu-primarni-glavni-meni" class="menu col-sm-6 col-lg-6">
							<li id="item" class="menu-item"><a href="#">O znamki</a></li>
							<li id="item" class="menu-item"><a href="#">Zgodovina</a></li>
							<li id="item" class="menu-item"><a href="#">Za goste</a></li>
							<li id="item" class="menu-item"><a href="#">Za organizacije</a></li>
						</ul>
					</div>				
				</nav>
				
			</div>	
		</header>
</html>


Poglej kakšna je sedaj oblika:

marjan_h ::

Aja, sem ugotovil kaj je bilo narobe. Keyword "row" sem dal parametru id namesto class. Sedaj je oblikovanje takšno kot sem določil.

Ampak še vedno se list itemi ne zložijo eden za drugim vertikalno kot bi želel, ko skrčim okno brskalnika. Je kdo tukaj strokovnjak za bootstrap?


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297296107 (20256) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151455 (1183) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč
71633 (1501) XzupanX
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61404 (1284) jonystar
»

Poravnava znotraj DIV

Oddelek: Izdelava spletišč
91473 (1354) alum

Več podobnih tem