Bootstrap CSS 网格自定义答案

【问题标题】：Bootstrap CSS Grid CustomizeBootstrap CSS 网格自定义
【发布时间】：2016-09-13 19:16:23
【问题描述】：

我想创建一个图像网格，左侧有一张完整图像，右侧有 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>

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

【问题讨论】：

你的问题措辞有点模糊，但我想你是在问如何限制第二组图像的行高？如果是这种情况，请尝试通过 css 设置最大高度。您可能还想将第二行和所有 col-md-3 更改为 col-md-6
我不会将一行嵌套为另一行的直接后代。添加一列，然后将行放在其中。您可以设置明确的高度，使用flex/table 或使用一些js 使两者的高度相等。除非您将 Bootstrap 4 与 flexbox 一起使用，否则我认为目前还没有原生方式。
谢谢大家。我现在已经将该行嵌套在一列下。正如预期的那样，问题仍然存在。好吧，我想我现在会尝试解决这个问题。
将尝试 B4 的解决方案，@AnkithAmtange。但这仍处于 Alpha 阶段，对吧？让我们看看情况如何..

标签： html css twitter-bootstrap

【解决方案1】：

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

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

一切都可以放在一个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

【讨论】：

【解决方案2】：

“行”元素不应是另一个行元素的直接子元素。您应该将其作为另一个 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>

【讨论】：

明白你对行位置的看法。但我不希望 4 张图像水平显示在同一行中。它们需要显示得更像一个 2 x 2 矩阵。
那么你应该使用 col-md-6 代替 col-md-3 并使它们具有相同的高度，你可以使用 max-height: 225px; 但我不是这个解决方案的忠实粉丝，这是sn-p：codepen.io/anon/pen/qabmXg