Twitter Bootstrap - 为缩略图标题提供最少的行数

Question

我在 Bootstrap 中有一个轮播，显示 4 列缩略图。这是有问题的轮播。如果移动到第三页，您可以看到容器的高度增加，以容纳缩略图标题的内容。我一直在尝试很多事情，例如设置下边距、最小高度等，以使"查看详细信息"按钮在整个轮播中的位置保持不变。

我的问题是解决这个问题的最佳方法是什么？我在想以某种方式使缩略图标题高度至少为 4 行左右，但我尝试了（可能是错误的方式）无济于事。

Answer 1

当我添加

.caption h4 {
    min-height: 2.2em; /* 2 lines as line-height is 1.1 */
}

我在同一级别获得所有"查看详细信息"。但是，这显然不会解决字幕更高的问题。它仅在实际上没有标题更高时才有效。（但没关系，如果你确定没有什么会高于你的倍数。

因此，相反，我应用了这点CSS来从另一边进行限制。

.caption h4 {
    max-height: 4.4em;  /* 4 lines as line-height is 1.1 */
    height: 4.4em;      /* making it a multiple allows usage of overflow */
    overflow: hidden;   /* without cutting a line in the middle */
}

如果要动态设置等于最高字幕高度的最大高度，则必须使用一点JS：

(function(d) {
    var captions = d.querySelectorAll('.caption h4'),
        height = 0;
    for(var i = 0; i < captions.length; i++) {
        height = Math.max(height, captions[i].offsetHeight); // or clientHeight depends on you box model
    }
    var style = d.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.caption h4 { max-height: '+ height +'px; height: '+ height +'px; }'; // they don't need overflow as none of them can overflow;
    d.getElementsByTagName('head')[0].appendChild(style);
})(document);

您可以在正文末尾添加此脚本，以便 DOM 已经加载（或以某种方式触发它加载）。

重要提示：由于querySelectorAll，旧版浏览器不支持此代码段。

当我在您的网站上运行它时，这可以解决问题。