Question

我正在尝试删除缩略图网格行之间的垂直空间，就像我在水平方向上所做的那样，但没有成功。

.gutter-0.row {
    margin-right: 0;
    margin-left: 0;
    /* not working */
    margin-top: 0; 
    margin-bottom: 0;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
    padding-right: 0;
    padding-left: 0;
    /* not working */
    padding-top: 0;
    padding-bottom: 0;
}

HTML

    <div class="row gutter-0">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
    </div>
    <div class="row gutter-0">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="">
            </div>
        </div>

    </div>

Bootply

我该怎么办？谢谢

Answer 1

“缩略图”类中有一个保证金底部。

只需将其添加到您的css中即可将其删除：

.thumbnail {
  margin-bottom: 0;
}

Bootply

Answer 2

.thumbnail有20px的底部保证金。重置它或使用以下样式。

.thumbnail{
  display: table-cell;
}

http://www.bootply.com/hDnBumWAdZ

bootstrap从缩略图的网格行中删除垂直空间

2 个答案: