css - 在表警报 Div 上 Bootstrap 相同的高度？

Question

在研究这个问题时遇到了一些麻烦，也许我只是没有想清楚。我正在使用 Bootstrap 3 并有一个表格来提取数据，我正在使用他们的 Alert 样式的 div 突出显示某些数据。

我遇到的问题是，根据数据，它们都有不同的高度，我希望它们都相同。我看过其他示例，但它们没有使用表结构。

有没有办法做到这一点，或者我唯一的选择是放弃表格并进行单独的 Bootstrap 列？

附件是表格行的示例。

Answer 1

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

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