Mam standardową pętlę do galerii zdjęć i używam twitter-bootstrap col-xs-12 col-sm-6 col-md-4 col-lg-3 co daje mi 4 obraz na całym pulpicie, ograniczając się do jednego zdjęcia na telefonie komórkowym.
Wszystko działa dobrze.
Jedną rzeczą, która wywołuje we mnie dezorientację, jest to, że chcę, aby zdjęcie jednoosobowe po wyświetleniu na urządzeniach mobilnych było wyśrodkowane na stronie, ale wszystkie są wyrównane do lewej.
Oto kilka podstawowych pseudo tego, co robię:
<div class="container">
<div class="row">
<?php
foreach ($photos AS $photo) {
?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="/images/pathtoimage">
</div>
<?php
}
?>
</div>
</div>
Ponownie, rzeczywista część pętli, a cztery w dół do jednego w poprzek wszystko działa idealnie, Po prostu utknąłem, jak uzyskać widok mobilny (col-xs-12) być wyśrodkowane na środku strony, a nie wyrównane do lewej.
Czy ktoś wie, do czego służy magia bootstrapu?
Odpowiedzi:
1 dla odpowiedzi № 1Możesz wyśrodkować zdjęcia za pomocą jakiegoś CSS. Stworzyłem skrzypce
Jeśli chcesz, aby obrazy były wyśrodkowane, dodaj tylko punkty przerwania, aby użyć zapytań o media do wyśrodkowania ich w określonych punktach przerwania.
Na przykład, aby dodać obrazki tylko na małych ekranach:
@media(max-width: 768px) {
.gallery-image img {
display: block;
margin: 0 auto;
}
}
0 dla odpowiedzi nr 2
Posługiwać się text-center klasa do centrum obrazu