具有不同宽度图像的引导网格答案

【问题标题】：Bootstrap grid with varying width images具有不同宽度图像的引导网格
【发布时间】：2015-10-19 06:46:16
【问题描述】：

我想创建一个包含 2 列的网格，第一列的大小为 col-md-1，第二列的宽度为 col-md-2。

在第一列中，我有 3 行，每行都有一个方形图像。第 2 列有 2 行，第 1 列有 1 张图片，第 2 列有 2 张图片。

所有使用的图片都是原来的尺寸。

这给了我以下信息：

这给我带来了一个小问题 - 由“col”类和缩略图上的填充引起的网格间隙意味着较大的图像总是太大或太小。

有没有人获得了一种可接受的方式来实现这种类型的网格布局？

我的代码如下：

    <div class="row">
            <div class="col-md-1 col-md-offset-2"> 
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
            </div>
            <div class="col-md-2">

                    <div class="col-md-12 col-padding">

                                <div class="thumbnail">
                                  <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                                </div>

                    </div>

                <div class="row">
                    <div class="col-md-6">


                            <div class="thumbnail">
                              <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                            </div>

                    </div>
                    <div class="col-md-6">


                            <div class="thumbnail">
                              <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                            </div>


                    </div>
                </div>

            </div>

    </div>

【问题讨论】：

标签： html twitter-bootstrap grid

【解决方案1】：

像这样向你的 css 添加一个没有填充的类：

.no-padding {   
    padding: 0;
}

然后在 div 上使用这个类：

<div class="col-md-12 col-padding no-padding">
...

这应该可行。

您还需要在 .thumbnail 类中添加更多 margin-bottom。

.thumbnail {
    margin-bottom: 30px;
}

如果需要，您需要使用媒体查询来调整填充。

这是Fiddle

【讨论】：

您好，谢谢。我之前尝试过（应该提到过），但我仍然遇到这样一个问题，即 col1 中的 3 个较小的图像总共比 col2 有更多的填充，因为它从上到下只有 2 个图像。