bootstrap zawartosc nie miesci się

Question

posiadam taki kod ucze się bootstrapa i mam pytanie gdy strona sie powiększa robi się ciasno dla bloku topright i zawartosc floatuje do prawej bo tak jest ustawiona dla wiekszej rozdzielczosci jak poradzić sobie aby tekst układał się jako float left ? dla moblinych urzadzeniach

<div id="top-bar">
<div class="container">
  <div class="row" id="topleft">
		<ul id="topleft">
			<li><i class="fas fa-envelope"></i> <a title="kontakt@wp.pl" href="mailto:kontakt@wp.pl">kontakt@wp.pl</a></li>
			<li><i class="fas fa-phone-volume"></i> 888-888-888</li>
			<li><i class="fab fa-facebook-square"></i> <a href="">FB</a></li>
		</ul>
	</div>
	<div class="row" id="topright">{{ page.topright }}
	</div>
  </div>
</div>

 

 

 

Answer 1

topleft i topright  masz umieszczone w row, jak sama nazwa klasy mówi to jest cały wiersz. Nie znam zawartości topright dlatego trudno mi wyobrazić sobie co chcesz uzyskać. Jeśli to inline(np. text) to możesz dla topright dać na przykład text-left text-lg-right, jeśli block to możesz dać float-left float-lg-right. Jak wrzucisz kod na codepen.io to powiem/napiszę Ci to dokładnie.

Swoją drogą masz dużo id, do czego są Ci one potrzebne? Co najważniejsze to powtarza ci się id="topleft", a id ma być unikatowe dlatego może występować tylko raz.