Bootstrap 中的响应式正方形网格答案

【问题标题】：Responsive Grid of Squares in BootstrapBootstrap 中的响应式正方形网格
【发布时间】：2015-07-06 23:51:21
【问题描述】：

我想在 Bootstrap 中创建一个响应式图像网格。

到目前为止，我得到了这个：Jsfiddle Link

这部分强制元素一直平方：

.frontpage_square {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}

.frontpage_square img {
    position:absolute;
}

左边较大的正方形和右边的九个较小的正方形是正确的，但我不知道如何将右边的九个正方形分布在整个高度上。所以基本上他们应该占据左边更大正方形的整个高度。

【问题讨论】：

我可以通过做一些数学轻松地实现它。但是你为什么要这么乱的网格系统..？
为什么乱七八糟？这是某事。比如“1个较大尺寸的特色元素和9个较小尺寸的普通元素在它旁边的网格中”。这里没有什么太疯狂或者我错了吗？
没什么问题。但是输出包含太多的填充，而且你获得方形缩略图的方式padding:100%可能不是最好的。
对于未来使用 Bootstrap 4 的读者，this question may be helpful

标签： css twitter-bootstrap grid-layout

【解决方案1】：

这很简单，你没有正确安排你的 div。通过正确使用 div 来使用引导程序。完成后，您可以使用 this S.O. question 使列大小相同。

jsfiddle

<div class="row">
    <div class="col-sm-6 panel">

            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>    

    </div>
  <div class="col-sm-6 panel">

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4 ">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>  

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4 ">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>  

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>

</div>

【讨论】：

好的，我发现的第一件事是：使用了旧版本的 Bootstrap。解决了这个问题并使用了你的方法。但是经过相当多的谷歌搜索后，我仍然不知道如何让 9 个正方形的右侧块与左侧的单个大正方形具有相同的高度。就像在你的 jsfiddle 中一样，9 个正方形的最后一行总是比大正方形高几个像素。所以看起来他们有一个填充底部，我不希望他们有......
不应该每12列有一行吗？
@niico 不一定。这完全取决于您以及您最终想要实现的目标。
谢谢。如果您想将文本放在正方形中，您将如何执行此操作（目前，如果您向其添加文本，它会使“正方形”比它的宽度高） - 我问了一个问题：stackoverflow.com/questions/40445364/…
这个答案会随着 bootstrap 4 而改变吗？