Question

我试图找出如何使用Bootstrap列出要在响应行中显示的图像。这是为此帖子修改的通用代码。现在，图像显示在行的左侧，而不是居中。我也尝试在图像中添加中心块类。这并没有改善事情。

还有其他建议吗？

<div class="text-center">
    <div class="row">
         @foreach ( $images as $count => $asset)
             <div class="col-6 col-sm-4 col-md-2">
                 <div class="project-image-container">
                     <a href="">
                         <img src="images/*" class="img-fluid" />
                     </a>
                 </div>
             </div>
        @endforeach
    </div>
</div>

Answer 1

将text-center类添加到包装器div。

<div class="text-center">
    <div class="row">
         @foreach ( $images as $count => $asset)
             <div class="col-6 col-sm-4 col-md-2">
                 <div class="project-image-container text-center">
                     <a href="">
                         <img src="images/*" class="img-fluid" />
                     </a>
                 </div>
             </div>
        @endforeach
    </div>
</div>

这是一个小提琴：https://jsfiddle.net/vu1e9ba8/

在Bootstrap行中居中图像

1 个答案: