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));