Question

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

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

所有使用的图像最初都是ame尺寸。

这给了我以下信息：

这引起了一个小问题 - 由'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>

Answer 1

Add a class with no padding to your css like this:

.no-padding {   
    padding: 0;
}

Then use this class on the div with:

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

This should work.

You also need to add some more margin-bottom to the .thumbnail class.

.thumbnail {
    margin-bottom: 30px;
}

If needed you will want to adjust the padding using media queries.

Here is a Fiddle

具有不同宽度图像的Bootstrap网格

1 个答案: