Bootstrap中响应网格的正方形

Question

我想创建一个响应式图像网格,它总是在Bootstrap中平方.

到目前为止,我得到了这个:Jsfiddle Link

这部分强制元素始终被平方:

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

.frontpage_square img {
    position:absolute;
}

左边较大的方块和右边的九个小方块是正确的,但我无法弄清楚如何在整个高度上展开右边的九个方块.所以基本上他们应该采取左,更大的正方形的整个高度.

Answer 1

这很简单,你没有正确安排你的div.正确使用div可以使用bootstrap.完成后,您可以使用此SO问题使列大小相同.

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