修复Bootstrap不等的列高

Question

我有一个包含可变数量列的Boostrap行。这个列数由CMS控制，因此它可以是不适合一行的更多列。

我需要找到一种方法来很好地显示所有列（例如，高度相等）。

<div class='row'>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
</div>

我已经找到了一些解决方案，可以使所有列的高度相等，但只要您使用100％以上的行来显示列，它们就无法工作。

Answer 1

您可以删除不会使高度相同但会更正对齐的浮动

<div class='row panel-wrapper'> 

CSS

.panel-wrapper > .col-lg-2{
    float: none;
    display: inline-block;
}

至于高度不难发现脚本循环遍历公共元素类并设置相等的高度

Answer 2

我假设Bootstrap正在为您应用的类分配宽度，因此您应该删除它或重置它。

然后CSS表可以提供帮助。

这将使所有列的高度相同和使宽度相同。它还会自动调整其宽度以填充容器行。

.myrow {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.mycol {
    display: table-cell;
}

.mycol {
  height: 50px;
  border: 1px solid grey;
}
.myrow {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.mycol {
  display: table-cell;
}

<div class='myrow'>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
</div>

<div class='myrow'>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
</div>

Answer 3

使用jQuery插件：
https://github.com/liabru/jquery-match-height
它会计算并设置正确的高度