css - "col-xs-12 col-sm-6 col-md-4 col-lg-3"页面中心为 col-xs-12

Question

我有一个照片库的标准循环，我正在使用 twitter-bootstrap 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>

再说一次，实际的循环部分，以及从四个横跨到一个横跨都完美地工作，我只是被困在如何获得移动 View (col- xs-12) 在页面中间居中，而不是左对齐。

有人知道实现这一目标的 Bootstrap 魔法是什么吗？

Answer 1

您可以使用一些 CSS 将图像居中。我创建了一个 fiddle

如果您希望图像居中，只需添加某些断点，您可以使用媒体查询在某些断点处将它们居中。

例如，仅在小屏幕上使图像居中:

@media(max-width: 768px) {
  .gallery-image img {
    display: block;
    margin: 0 auto;
  }
}