"col-xs-12 col 6 col 4 col 3“，页的核心为col 12。
"col-xs-12 col 6 col 4 col 3“，页的核心为col 12。
提问于 2016-12-31 13:44:38
我有一个图片库的标准循环，我使用的是推特-引导 col-xs-12 col-sm-6 col-md-4 col-lg-3，它在桌面上为我提供了一个4张图像，缩小到移动上的一张照片。
一切都很好。
让我烦恼的一件事是，当我在移动设备上观看时，我希望这张照片在页面上对齐，但它们都是对齐的。
下面是我所做的一些基本的假象：
<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="pathtoimage">
</div>
<?php
}
?>
</div>
</div>再一次，实际的循环部分，从四个到一个跨所有工作完美，我只是被困在如何使移动视图(col-xs-12)中心在页面的中间，而不是左对齐。
有人知道是什么自举魔法让这一切发生吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-31 16:04:09
您可以使用一些CSS对图像进行居中。我创建了一个小提琴
如果希望图像居中，只添加某些断点，而不能使用媒体查询将其集中到特定的断点。
例如，要将图像集中在小屏幕上：
@media(max-width: 768px) {
.gallery-image img {
display: block;
margin: 0 auto;
}
}Stack Overflow用户
发布于 2016-12-31 13:47:40
使用text-center类对图像进行中心化
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41408818
复制相关文章
相似问题
腾讯云开发者
