css - 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.

当我在您的网站上运行它时，这就是诀窍。