css - 具有固定大小和滚动条的 Bootstrap 缩略图

Question

我允许用户上传带标题的图像，它会在 Bootstrap 缩略图内上传，问题是如果标题太长会弄乱页面的外观。我怎样才能使缩略图的大小固定，这样如果标题太长，我就会有一个滚动条来显示标题的其余部分。我尝试添加滚动条，但没有帮助。

<div class="col-md-4">
       <div class="thumbnail" style="overflow-y:scroll;">
        <a href="{{ url('/home', $images->id) }}">
         <img src="{{$images->filename}}" alt="Food">
        </a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>{{$images->caption}}</p>
        <p>
           <a href="#" class="btn btn-primary" role="button">Yum!</a> 
           <a href="#" class="btn btn-default" role="button">Comment</a>
        </p>
      </div>
   </div>
</div>

Answer 1

将 .caption 设置为任何你喜欢的高度... min-height 如果它们都应该是相同的高度。并添加 overflow: hidden，这将阻止内容进一步扩展高度。

如果您不希望字幕被截断，您可以限制它们的大小后端(PHP？)，或使用 CSS 省略号。