Twitter Bootstrap Legacy：跨度上的统一高度

Posted 2023-03-06

【中文标题】Twitter Bootstrap Legacy：跨度上的统一高度

【英文标题】：Twitter Bootstrap Legacy: Uniform height on spans

【发布时间】：2013-09-05 15:45:03

【问题描述】：

见下图：

我需要放大 B 列以匹配第一列的高度，或者如果我有几列，它们总是保持相同的高度，调整到最大的列高。

我用<div class="clearfix"></div> 和height: 100% 玩了一段时间都没有成功。

我正在使用 Twitter Bootstrap 2.3.2。

HTML：

 <div id="main" class="row-fluid">
        <div class="span6">
            <div>
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBB
            </div>
        </div>
        <div class="span6">
            <div>
                B
            </div>
        </div>
    </div>

CSS：

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");

        #main 
            height: 5em;
        
        .span6 
            background-color: lightgray;
            border: 1px solid red;
        

        .span6 > div 
            background-color: lightblue;
            border: 1px solid green;
        

由于某种原因，小提琴与上面代码的图像不相似，但如果将其粘贴到 test.html 中，它可以正常工作。

编辑：

如何对齐内部span divs 的高度？

编辑 2：

在@Coop 的指导下，我终于设法解决了这个问题。我来到以下代码：

var content_height = [];

jQuery('.row-fluid > div')
    .each(function () 
        content_height.push(jQuery(this).css(minHeight: 0).height());
    )
    .each(function () 
        jQuery(this).css(

        minHeight: Math.max.apply(Math, content_height)
        );
    );

【问题讨论】：

是的，这是流体高度跨度的一个古老问题。我不喜欢 CSS 解决方案，因为它们要么混乱要么不向后兼容。你介意使用 jQuery 吗？如果没有，我可以发布一个解决方案。

@Adrift：这在我的原始代码中不起作用:(此外，我需要将宽度保持为默认引导宽度，因为稍后我将通过更改其跨度类来更改列宽度。谢谢无论如何:)

@Coop：当然！欢迎任何解决方案！ :) 我更喜欢纯 CSS 的，但如果你的工作正常并且没有 CSS 解决方案，我会坚持使用你的！ :)

【参考方案1】：

看到这个Fiddle你可以通过添加大负边距的大填充然后用overflow: hidden;包裹你的跨度来做到这一点

CSS

.sameheight 
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:green;

.wrap 
    overflow: hidden;

【讨论】：

哇！整洁的！工作得很好！你能对我好一点并解释背后的理论吗？这种带有边距、填充的零结果操作怎么会导致它起作用？

啊有趣的解决方案。我也想知道理论。

嗯，我想我开始明白了。只剩下一个问题：如果我在跨度内有一个内部 div，带有边框和背景颜色，并且想要其他列的高度，我会怎么做？如果我正确理解您的解决方案，底部边框将被父溢出剪裁，对吗？

啊，是的，我现在也明白了。是的，您可以在 div 中的内容上设置底部边框或自定义底部填充的唯一方法是在内部设置另一个 div。您将添加更多标记。例如：jsfiddle.net/p2THd/2 这就是我所说的 CSS 解决方案混乱的意思，因为您经常需要在结构中添加更多层。 jQuery 解决方案避免了这种情况。

是的。我现在就试试你的解决方案:)

【参考方案2】：

使用 jQuery 解决方案来做到这一点：

首先将eHeight 类添加到要赋予相同高度的一行中的所有 div 中。 然后在下面添加jQuery：

$('.eHeight').each(function () 
  var eHeight = $(this).parent().innerHeight();
  $(this).outerHeight(eHeight);
);

在此处查看小提琴：http://jsfiddle.net/VA6D4/

请注意，jQuery 需要在 $(window).load 中，因为谷歌浏览器在加载图片之前会将其高度和宽度设为 0。

【讨论】：

是的，看来 jQuery 是最好的选择。当我有一个可行的解决方案时，我会将其作为评论发布在这里。

酷。过去我尝试过很多 CSS 解决方案和其他布局来实现这一点，但得出的结论是，这个简单的 jQuery 是最好的解决方案。

我设法通过使用 EDIT 2 中的代码解决了这个问题。我会将您的答案标记为已接受，因为您帮了我很多忙:) 谢谢

很高兴我能帮上忙。我有时会修改该代码以适应设计的需要，但概念就在那里。