• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

bootstrap kolumna na środku

VPS Starter Arubacloud
0 głosów
982 wizyt
pytanie zadane 29 lutego 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

witam mam kod:

HTML:

<div class="container">
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<img src="https://placehold.it/500x500" class="img-responsive img-circle">
			<h3>Daniel Zeman</h3>
			<p>Przykładowy wypełniacz w przemyśle poligraficznym.</p>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<a href="#"><img src="https://placehold.it/500x500" class="img-responsive img-circle"></a>
			<h3>Daniel Zeman</h3>
			<p>Przykładowy wypełniacz w przemyśle poligraficznym.</p>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<a href="#"><img src="https://placehold.it/500x500" class="img-responsive img-circle"></a>
			<h3>Daniel Zeman</h3>
			<p>Przykładowy wypełniacz w przemyśle poligraficznym.</p>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<a href="#"><img src="https://placehold.it/500x500" class="img-responsive img-circle"></a>
			<h3>Daniel Zeman</h3>
			<p>Przykładowy wypełniacz w przemyśle poligraficznym.</p>
		</div>
	</div>
</div>

dla kolumn 4 (3) i 2(4) marginesy fdobrze się skalują (obrazki są na środku),

niestety dla kolumny 1 (12) obrazek się przykleja do lewej strony

jak zrobić żeby ten obrazek też był na środku, z góry dziękuję za pomoc :)

3 odpowiedzi

0 głosów
odpowiedź 29 lutego 2016 przez HaKIM Szeryf (87,590 p.)

Spróbuj box'a, w którym znajdują się obrazki wystylować na margin: 0 auto; Jeżeli się nie uda to można również przypisać margin do samego zdjęcia..

0 głosów
odpowiedź 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)

co prawda działa:

ale zostaje jeszcze napis o którym zapomniałem wspomnieć ;c

 

komentarz 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)

http://scr.hu/1up6/blh0v

<div class="col-md-3 col-sm-6 col-xs-12 srodek">
			<a href="#"><img src="https://placehold.it/500x500" class="img-responsive"></a>
			<h3>Jasiu Jasiowski</h3>
			<p>Przykładowy wypełniacz w przemyśle poligraficznym.</p>
		</div>

	<style>
		body
		{
			background-color: grey;
			
		}
		.srodek
		{
		margin: 0 auto;
		background-color: red;
		}
	</style>

 

komentarz 29 lutego 2016 przez HaKIM Szeryf (87,590 p.)

To tekstu możesz dodać klasę od bootstrapa text-center;

Przykład:

<p class="text-center">
 Hello World
</p>

 

komentarz 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)
ale nie chcę go mieć na środku pod obrazkiem, tylko z lewej strony zaraz pod obrazkiem
komentarz 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)
poza tym czułbym się pewniej jak by to było wyśrodkowane w jednym boxie, ma ktos inny pomysł?
0 głosów
odpowiedź 29 lutego 2016 przez radek024 Szeryf (77,180 p.)
Dla danej szerokości możesz użyć pull lub push, w zależności od tego na jakiej szerokości jesteś. Zawsze możesz zagnieździć kolumny w innych kolumnach, ale to za dużo kombinowania - opisz dokładniej co chcez zrobić, a się ogarnie ;)
komentarz 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)
ustawić jedną kolumnę, w niej zdjęcie i napis tak zeby napis
komentarz 29 lutego 2016 przez radek024 Szeryf (77,180 p.)
Aby takie coś zastosować, najlepszym rozwiązaniem będzie użycie znacznika figure-> tam obrazek, a w środku dodac jeszcze figcaption->opis obrazka. Jeżeli np.: na medium treść ma zajmować cztery pola i być przy tym wyśrodkowana, należy wpisać dla atrybutu class="col-md-4 col-md-push-4 ". Powinno działać.
komentarz 29 lutego 2016 przez Dynamic Bywalec (2,910 p.)
nic z tego co napisałeś nie pomogło , poza tym nie musze dopisywać col-md-push-4 żeby mieć te kolumny na środku

Podobne pytania

0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 6 kwietnia 2020 w HTML i CSS przez terianmt2 Nowicjusz (230 p.)
0 głosów
2 odpowiedzi 345 wizyt
0 głosów
0 odpowiedzi 57 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...