siatka bootstrapa

Question

 <div class="wraper"> 

 <div class="container-fluid">
 
        <div class="header">
 
 <div clsss="col-sm-6">
    <div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe</div>
</div>
     <div clsss="col-sm-6">
   <div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
 </div> 
  

<div class="st">
  <nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	
	 <ul class="navbar-nav mr-auto">
	 <li class="nav-item active">
    <a href="index.php" title="Home"> <i class="icon-home"> </a></i></li> 
  
  <li class="nav-item active">
		<a href="film.php" title="Film" >Film</a></li>
		
   <li class="nav-item active">
		<a href="historia.php" title="Historia" >Historia</a></li>
			
	<li class="nav-item active">
		<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
	<li class="nav-item active">
		<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
	<li class="nav-item active">
		<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
	<li class="nav-item active">
    <a href="omnie.php" title="O mnie">O mnie </a></li>
   
    <li class="nav-item active">
   <a href="englishversion.php" title="English version"> <i class="icon-language"> </a></i></li> 
   </div>
   </ul>
</div>   
    
</div>

   <div class="content">
   <div clsss="col-sm-4">
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2></br>
<p style="text-indent: 7%;">Drogi gościu, niezwykle miło mi cię widzieć na mojej stronie! Jest to moja pierwsza strona internetowa w moim życiu - nie badź więc zbyt surowy dla jej wygladu, lub jej braków - poprostu dałem z siebie wszystko co mogłem, aby była jak najlepsza, jeżeli posiadasz jakies uwagi proszę kieruj je bezpośrednio na mojego maila lub na moje social media! Ta strona będzie sukcesywnie rozbudowywana o kolejne materiały, więc wpadaj co jakiś czas, aby sprawdzić co nowego! Strona ta została stworzona przeze mnie z dwóch powodów - po pierwsze mojej niezwykłej miłości do Bałkanów i podróży, oraz z chęci znalezienia nowej pracy, a czy może być lepsza reklama, niż pokazanie swoich umiejętności? Tak więc, ciesz się tą stroną i niech umila ci czas!  </br></br></P>'?>
</div>
<div clsss="col-sm-4">
<div class="Parallax2" class="img-fluid" title="Moje zdjęcie na tle Akropolu ateńskiego">
</div> 
</div>
</br>
<?php echo '<p style="text-indent: 7%;">
Moją stronę podzieliłem na kilka działów takich jak: film, historia, kuchnia, muzyka, poradniki oraz o mnie. W działach tych będę się starał skupić na kulturze Bałkańskiej i nie tylko :) uzupełnieniem mojej tworczości będa filmy, zdjęcia oraz artykuły omawiające Bałkany z mojej perspektywy, natomiast w zakładce "o mnie" będą informacje o mojej osobie jak również dane do kontaktu. </br>
Serdecznie was do tego zapraszam!</p>';?>


<?php echo '<p style="text-indent: 7%;">Jeśli masz jakiś pomysł na stronę, chciałbyś mnie zatrudnić, podjąć jakąś wspołpracę ze mną lub po prostu umowić się na piwo to również zapraszam cię do kontaku! </p>';?>


</br>
 <div clsss="col-sm-4">
<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego">
 

</div>
</div>
</div> 



</br>
   </div>
  
  
  
 <div class="socials"> 
     <div class="socialdivs">
	 
	<div clsss="col-sm-4">
       <div class="FB"> <a href="https://www.facebook.com/" <i class="icon-facebook-rect"target="_blank" title="Zapraszam na mojego Facebooka"> </a></i>
			</div></div>
	   
	   <div clsss="col-sm-4">
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </a></i>
	   </div></div>
	   
	   <div clsss="col-sm-4">
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></a></i>
		</div></div>	   
	   
	   
	   <div clsss="col-sm-4">
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank"><i class="icon-linkedin"title="Zapraszam na mój profil na Linkedin"> </a></i>
	   </div></div>
	   
	   <div clsss="col-sm-4">
       <div class="instagram"><a href="https://www.instagram.com/" target="_blank"title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></a></i>
		</div></div>
		
       <div style="clear:both" ></div>
     </div>
         
		 
		 </div>
			
  <div class="footer">copyright: napoludnie.pl 2020&copy Strona ta powstła z mojej checi rozwoju w sferze IT oraz zamiłowania do podróży. </br>Twórcą tej strony jest Jan. Chcesz o mnie wiedzieć więcej? Sprawdź moje social media! </div>

Czy ktoś mi wyjaśni jak podpiąć bootstrapa żeby po zmniejszeniu rolowalo sie ladnie napisy i parallaxy? siedze dumam i nie moge cos wymyslic :/ moze czegos nie widze? ew kometarze jak polepszyc rowniez wskazane

Answer 1

Ciężko zrozumieć o co chodzi bez wglądu w stronę lub ewentualnie screenów dlatego odniosę się do ostatniej części

 ew kometarze jak polepszyc rowniez wskazane

Weźmy na przykład div socialdivs: masz w nim divy o klasie col-sm-4 jeśli używasz bootsrapa powinny one znajdnować się wewnątrz diva o klasie row. Nie rozumiem też co na końcu robi

<div style="clear:both" ></div>

Skoro bootstrap (kakładam, że korzystasz z najnowszej stabilnej wersji tj 4) oparty jest na flex-box i nie ma potrzeby dodawania tego. 

Ogólnie sam kod jest bardzo nieczytelny co powoduje, że nieprawidłowo zamykasz tagi, tutaj przykład

<a href="https://www.instagram.com/" target="_blank"title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></a></i>

Najpierw otwierasz tag a potem tag i a następnie w złej kolejności zamykasz (najpierw a dopiero potem i. Powinno być na odwrót).

Ogólnie coś takiego

       <div clsss="col-sm-4">
       <div class="instagram"><a href="https://www.instagram.com/" target="_blank"title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></a></i>
        </div></div>

Możesz zapisać np w ten sposób:

<div clsss="col-sm-4">
	<div class="Linked">
		<a href="https://www.linkedin.com/" target="_blank">
			<i class="icon-linkedin"title="Zapraszam na mój profil na Linkedin"></i>
		</a>
	</div>
</div>

 

Comments

ok dzieki sprawdze jak wyglada z row i poprawie bledy

---

ok  wiec tak dodalem row i dziala mi glowna czesc z trescia i parallaxami - tylko jak zmieniam szerokosc okna to znika mi margines przez co strona po lewej i prawej stronie jest mniej czytelna (u gory i u dolu jest ok), no i social divy mimo zamkniecia je w row nadal nie ukladaja sie kafelkami jedna nad drugim, choc najlepiej by bylo jakby sie zwezily w jednej linii) czy divy powinny byc oznaczone w innej klasie, jakies specyficznej? i jak dodac marginesy przy malym oknie?

---

@eunstachy,