Question

我制作了一个简单的产品组合并使用Bootstrap 3.没有字幕我的图像看起来像这样：

当我在其下添加标题时，它们看起来像这样：

我希望它们像第一张图片一样，但在它们下面添加了标题。

这是HTML（带字幕）：

<div class="works-list type-one">
                <div class="row">
                    @foreach($proizvodi as $proizvod)
                        <div class="col-md-3 col-sm-6">
                            <div class="work-item">
                                <div class="wi-over">
                                    <h4>{{ $proizvod->naziv }}</h4>
                                    <ul class="clearfix">
                                        <li><a href="{{ $proizvod->slika_url }}" class="without-caption image-link"><img class="img-responsive"></img></a></li>
                                        <li><a href="{{ route('proizvod', array($kategorija->slug, $proizvod->slug)) }}"><i class="fa fa-file-text-o"></i></a></li>
                                    </ul>
                                </div>
                                <img src="{{ $proizvod->slika_url }}" alt="Work Name" class="img-full-border">
                            </div>
                            <div class="row">
                                <div style="padding-top: 5px;">
                                    <h5 style="font-weight:bold; font-size: 12px; text-align:center;">{{ mb_strtoupper($proizvod->naziv) }}</h5>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row">
                    <div style="text-align:center;">
                            {!! $proizvodi->render() !!}
                    </div>
                </div>
            </div>

我正在使用Laravel，因此包含了刀片代码。

以下是相关的css类：

.works-list.type-one{
    margin-bottom           : -30px;
}
.works-list.type-one .row div[class*="col-"]{
    margin-bottom           : 30px;
}
.works-list.type-one .work-item{
    position                : relative;
}

仅当标题长于1行时才会出现此问题。

有什么想法吗？

Answer 1

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.row {
    margin-right: 0px;
    margin-left: 0px;
}

在图像下添加标题会破坏引导程序图像网格

1 个答案: