Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]CSS - bootstrap 2 wyśrodkowane columny
Forum PHP.pl > Forum > Przedszkole
yha
27.06.2017, 16:21:34
Da się w bootstrap, zrobić wyśrodkowane columny na col-size ?


[HTML] pobierz, plaintext 
  1. <div class="row">
  2.    <div class="col-lg-5 col-centered"></div>
  3.   <div class="col-lg-2 col-centered"></div>
  4. </div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. .col-centered{
  2.   display: block;
  3.   margin-left: auto;
  4.   margin-right: auto;
  5.   text-align: center;
  6. }
[CSS] pobierz, plaintext



I nie jest to zbytnio wyśrodkowane ... tak do lewej ucieka o proszę:

http://i.imgur.com/n3muXIL.png
dentopolis
27.06.2017, 16:36:30
próbowałeś class="text-center"?
yha
27.06.2017, 16:42:41
Cytat(dentopolis @ 27.06.2017, 17:36:30 ) *
próbowałeś class="text-center"?


Nic nie dało, kolumny i tak nie są wyśrodkowane
Lord
27.06.2017, 17:50:01
https://www.bootply.com/suFloj2gi8
https://v4-alpha.getbootstrap.com/utilities/flexbox/
yha
27.06.2017, 18:01:32
Cytat(Lord @ 27.06.2017, 18:50:01 ) *
https://www.bootply.com/suFloj2gi8
https://v4-alpha.getbootstrap.com/utilities/flexbox/


W pierwszym linku przecież one nie są obok siebie tylko pod spodem ...
W drugim linku nie widzę odpowiedzi
Lord
27.06.2017, 19:15:42
https://www.bootply.com/I9UkipTACH
https://www.bootply.com/MO2o2krgkF
yha
27.06.2017, 19:27:47
http://i.imgur.com/5BCLJCS.png

Ehh czemu to gówno złośliwie nie chce działać questionmark.gif ...
Jak były tylko te dwie cyfry to OK. Z większym tekstem już ni jest jest.

Twój jeden i drugi kod nie działa prawidłowo.
Lord
27.06.2017, 19:31:26
podaj kod, to po 1, a po 2 wersja bootstrapa. tongue.gif

nie wiem, ja ci podałem i mi działa ;P
yha
27.06.2017, 19:33:42
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/style.css" />

Bootstrap 3.3.7


[HTML] pobierz, plaintext 
  1.  
  2. <div class="container">
  3.  
  4. <div class="container-fluid">
  5.     <div class="row d-flex justify-content-center bg-info">
  6.             <div class=" col-4 bg-warning">           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu leo, gravida a sollicitudin et, pharetra ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nec felis nec laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce fermentum malesuada metus, vel viverra eros auctor et. Ut tristique est nec nisl hendrerit, et lobortis lorem volutpat. Pellentesque erat velit, bibendum eu blandit sed, feugiat non mauris.
  7. </div>
  8.             <div class=" col-4 bg-danger">
  9. 			            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu leo, gravida a sollicitudin et, pharetra ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nec felis nec laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce fermentum malesuada metus, vel viverra eros auctor et. Ut tristique est nec nisl hendrerit, et lobortis lorem volutpat. Pellentesque erat velit, bibendum eu blandit sed, feugiat non mauris.
  10.            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu leo, gravida a sollicitudin et, pharetra ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nec felis nec laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce fermentum malesuada metus, vel viverra eros auctor et. Ut tristique est nec nisl hendrerit, et lobortis lorem volutpat. Pellentesque erat velit, bibendum eu blandit sed, feugiat non mauris.
  11.  
  12.  
  13. 			</div>
  14.     </div>
  15. </div>
[HTML] pobierz, plaintext



Cytat(Lord @ 27.06.2017, 20:31:26 ) *
podaj kod, to po 1, a po 2 wersja bootstrapa. tongue.gif

nie wiem, ja ci podałem i mi działa ;P


Wrzuciłem gołą wersję jak u Ciebie i też nie działa ... poprawnie .... są pod spodem.
Lord
27.06.2017, 19:33:51
1. flex jest w 4 z tego co mi wiadomo uzyważ 3
2. 

[HTML] pobierz, plaintext 
  1. <div class="container">
  2.  
  3. <div class="container-fluid">
[HTML] pobierz, plaintext

jedno wywal

tongue.gif

tutaj też masz:

https://www.codeply.com/go/Sv6Z9eR9kk
yha
27.06.2017, 20:07:29
Jest bootstrap 4 i ja nic o tym nie wiem? Ale chyba nie jest to pełna wersja ... Gdyż download na ich stronie wskazuje na pobieranie właśnie tej wersji co mam.

Co do linku pojawia się:


Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

Wywaliłem container: http://i.imgur.com/n6fpg1x.png i tak nie działa.

To samo jak usuwam: <div class="container-fluid">

Nic się nie zmienia.

Bez kontenera to już całkiem jest 100 % i nie ma środka
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.