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

“row”元素不应该是另一个行元素的直接子元素。你应该把它作为另一个col-md-6的孩子。

以下是示例：

https://codepen.io/anon/pen/dpGvOJ

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

        <div class="col-md-6">
            <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>      
        </div> 
    </div>
</div>

Answer 2

你是否能够使较大的图像实际上是一个较大的图像，以便与较小的“缩略图”相比，它可以相应地进行缩放？

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

所有内容都可以放在一个row ..

中

<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

Bootstrap CSS Grid Customize

2 个答案: