html - Bootstrap CSS 网格自定义

Question

我想创建一个图像网格，在左侧有一张完整图像，在大图像右侧有 4 个缩略图。就像我在这里所做的那样:

https://codepen.io/ashwindkini/pen/qabRok

<div class="container">
<div class="row">   
        <div class="col-md-6">
            <img src="https://placehold.it/450x450" alt="" />
        </div>
        <div class="row">
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
        </div>      

如何防止第二组图像(缩略图)增加行的大小？

Answer 1

您是否能够使较大的图像实际上成为更大的图像，以便与较小的“缩略图”相比，它可以响应地缩放？

这将有助于从列中删除填充，以便图像的宽度(由列填充强制)不会限制图像的高度。

一切都可以放在一个行..

<div class="container">
    <div class="row">
        <div class="img col-sm-6 col-md-6">
            <img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450/EEE" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450/444" class="img-responsive" >
        </div>
    </div>
</div>

http://www.codeply.com/go/y9nZTlXSWT