ustawienie -xs nie dziala

pytanie zadane 25 sierpnia 2017 w HTML i CSS przez turtelian Obywatel (1,760 p.)
edycja 25 sierpnia 2017 przez turtelian

Witam mam taki problem nie wiem z czym zwiazany, ustawienie xs w botstrapie nei dziala tak jak powinno:

<div class="container">
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Opcionalnie: clearfix dla kolumn XS gdy nie ułożą się prawidłowo z powodu różnicy w ich wysokościach -->
  <div class="clearfix hidden-sm-up"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>

w przypadku niskich rozdzielczosci kolumny ustawiaja sie niee obok siebie a jedna pod druga gdy usune col-sm i zostanie jeden warunek to kolumny sa obok siebie ale nie dzial sie rowno miejsce tylkoprzytulaja do siebie, problem istnieje tylko z -xs inne rozdzielczosci dzialaja jak pan bog przykazal

mala rozdzialka http://imgur.com/a/EjjKE
duza rozdzialka http://imgur.com/a/rv6qa

1 odpowiedź

odpowiedź 25 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

xs-12 oznacza, że zajmuje 100% szerokości przez co układają się pod sobą

Pokaż 7 poprzednich komentarzy

komentarz 25 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

Wytłumaczę Ci to. Div z klasą clearfix nie ma floatu więc będzie w kolejnym wierszu. Przez to divy z xs-6 układają się jeden pod drugim. Ale dlaczego to się dzieje tylko na XS? Ponieważ ustaliłeś sobie, że ten div ma być ukryty dla rozdzielczości SM w górę. Ale dla XS będzie widoczny, więc psuje Ci cały układ :)

komentarz 25 sierpnia 2017 przez turtelian Obywatel (1,760 p.)

tłumacze ze zarowno z clearfixem jak i bez dziala tak samo (czyli nie dziala..)zarowno jak usuwam tego diva jak i nie usuwam .....

taki kod tez nie dziala:

<html lang="">
<head>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<title></title>
				 <link rel="stylesheet" href="bootstrap.css">
</head>

<body>
			
<div class="container">
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
			
			
			
			
			
		
</body>
</html>

komentarz 25 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

http://jsbin.com/nahadexati/edit?html,css,output

A ja Ci mówię, że działa :D Spójrz tylko na ten link. Ładuję style bootstrapa od CDN.

komentarz 25 sierpnia 2017 przez turtelian Obywatel (1,760 p.)
edycja 25 sierpnia 2017 przez turtelian

znalazlem problem..... na bootstrapie4 nie dziala a na bootstrapie 3 dziala....
dzieki za pomoc :) a przynajmniej probe :)

PS: co ciekawe kod wziety z kursu bt4 wiec tam musial tez dzialac widocznie jako ze to beta cos muieli pozmieniac.

1	komentarz 25 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.) Na bootstrapie 4 nie masz col-xs a zwykłe col- Szkoda, że od razu nie napisałeś, który Bootstrap :) Mam nadzieję, że choć trochę mogłem pomóc. Miłego dnia!