引导程序中的响应方块 [英] Responsive Grid of Squares in Bootstrap

问题描述

我想创建一个始终在Bootstrap中平方的响应图像网格。

I want to create a grid of responsive images that are always squared in Bootstrap.

到目前为止，我知道了： Jsfiddle链接

So far I got this: Jsfiddle Link

这部分会迫使元素始终保持平方：

This part forces the elements to be squared all the time:

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

.frontpage_square img {
    position:absolute;
}

左边较大的正方形和右边九个较小的正方形是正确的，但我不知道如何在整个高度上散布右边的九个正方形。因此，基本上，它们应该占据左侧更大的正方形的整个高度。

The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square.

推荐答案

很简单，您没有在安排您的divs正确。通过正确使用div来使用引导程序。完成此操作后，您可以使用。

It is simple, you aren't arranging your divs properly. Make use of bootstrap by using the divs properly. Once that is done, you can make the column all same size by using this S.O. question.

<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>

这篇关于引导程序中的响应方块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！