我允许用户上传带标题的图像,它会在 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>
最佳答案
将 .caption 设置为任何你喜欢的高度... min-height 如果它们都应该是相同的高度。并添加 overflow: hidden,这将阻止内容进一步扩展高度。
如果您不希望字幕被截断,您可以限制它们的大小后端(PHP?),或使用 CSS 省略号。
关于css - 具有固定大小和滚动条的 Bootstrap 缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30786654/