Bootstrap表上的Alert Height相同高度？

Question

在研究这件事上遇到了一些麻烦，也许我只是没有想清楚。我正在使用Bootstrap 3，并且有一张表来提取数据，我使用它们的Alert风格的div突出显示了某些数据。

我的问题是，根据数据他们都有不同的高度，我希望他们都是一样的。我看过其他例子，但他们没有使用表格结构。

有没有办法做到这一点，或者是我唯一的选择沟渠表和做个别引导列？

附加是一个表行的例子。

Answer 1

我已更新您的fiddle。我假设你在每行中都有警报，因此我们遍历每个<tr>并找到.alert div，然后确定哪个警报具有最高的“高度”。然后，我们将这个height CSS添加到该行中的每个.alert。

的HTML结构发生了变化，我已经添加了<thead>和<tbody>

<table class="table"> 
    <thead> 
     <tr> 
     <th>Address</th> 
     <th>Super Permits</th> 
     <th>Active?</th> 
     </tr> 
    </thead> 
    <tbody> 
     .... 
     .... 

$('.table').find('tbody tr').each(function (e) { 
    var heights = $(".alert").map(function() 
    { 
     return $(this).outerHeight(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

    $(this).find('.alert').css('height', maxHeight); 
}); 

Answer 2

只需添加自定义CSS的“警戒”级，这将适用于所有警报类型，如：

.alert { 
    height: 90px 
} 

https://jsfiddle.net/W3AVE/4j72mfeo/

Answer 3

HTML

<table> 
    <tr class='same-height'> 
    <td><div><span>text</span></div></td> 
    <td><div><span>some long text here</span></div></td> 
    <td><div><span>text medium</span></div></td> 
    </tr> 
</table> 

CSS

div { 
    border: 1px solid black; 
} 

span { 
    text-align: center; 
    display: block; 
    position: relative; 
    top: 50%; 
    transform: translate(0, -50%) 
} 

JS

(function($){ 

    var $el = $(".same-height"), 
     h  = $el.height(); 

    $el.find("div").each(function() 
    { 
    var $self = $(this); 
    $self.css({"height": h}); 
    }); 

}(jQuery));