Bootstrap 中响应式的正方形网格

Question

Bootstrap 中响应式的正方形网格

7

我希望在Bootstrap中创建一个响应式图片网格，这些图片始终是正方形的。

到目前为止，我得到了这个：Jsfiddle链接以下代码可以使元素始终成为正方形：

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

.frontpage_square img {
    position:absolute;
}

左侧的较大正方形和右侧的九个小正方形都是正确的，但我无法想象如何将右侧的九个小正方形铺满整个高度。因此，它们应该占据左侧较大正方形的整个高度。

- nucci

我可以通过一些数学轻松实现它。但是为什么你想要这样混乱的网格系统呢..？ - Riddler

1

为什么这很混乱？它是类似于“一个大尺寸的特色元素和9个小尺寸的普通元素在网格旁边”的东西。这里没有太疯狂的东西，或者我错了吗？ - nucci

没有什么问题...但输出包含太多填充，并且您实现正方形缩略图的方式 padding:100% 可能不是最佳选择。 - Riddler

对于使用Bootstrap 4的未来读者，这个问题可能会有所帮助。 - Carol Skelly

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Coding Enthusiast · Accepted Answer

问题很简单，你没有正确地排列你的div。使用bootstrap并正确使用div即可解决这个问题。完成后，你可以使用这个S.O.问题使所有列的大小相同。

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>