Question

我有BootStrap 4，我正在尝试使某些列的高度等于另一列的高度。这是我的代码：

<div class="container" style="overflow:hidden">
    <div class="row" style="overflow:hidden">
        <div class="col-md-8" id="firstColumn">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md">
                </div>
            </div>
        </div>
        <div class="col-md-4" id="secondColumn" style="overflow:auto">
        </div>
    </div>
</div>

我的secondColumn的高度比firstColumn高，但我希望它的高度与firstColumn相同，并且还可以滚动。

我要提到的是，我的列处于模式，当用户单击按钮时，该列会从我的数据库中加载数据并填充模式。因此，在页面加载时，如果我将其高度设置为相等，将无法正常工作。

Answer 1

我能推荐的最好方法是使用调整大小的jQuery事件查看两个div的高度，并将较短的高度设置为较高的高度。

类似这样的东西：

$(window).resize(function() {
    firstHeight = $("#firstColumn").height();
    secondHeight = $("#secondColumn").height();
    if (firstHeight > secondHeight) {
        $("#secondColumn").height(firstHeight);
    } else {
        $("#firstColumn").height(secondHeight);
    }
}

您可能也希望它也可以在打开的页面上运行，因此您可以将内容命名为可以在ready和resize触发器中调用的命名函数。

Answer 2

使用Flexboxes！

.wrapper {
  display: flex;
  flex-direction: row;
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  flex: 1 0 auto;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  flex: 1 0 auto;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}

<div class="wrapper">
  <div class="colA">
    One Line
  </div>
  <div class="colB">
    More<br/>
    than<br/>
    one<br/>
    line!
  </div>
</div>

或通过 Bootstrap 4 -Bootstrap 4本机支持。 row-eq-height

.wrapper {
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<div class="wrapper row row-eq-height">
  <div class="colA col-6">
    One Line
  </div>
  <div class="colB col-6">
    More<br/>
    than<br/>
    one<br/>
    line!
  </div>
</div>

编辑：使其可滚动colB 要使col可滚动，您必须设置height或max-height并定义溢出，如示例所示。

引导程序列大小等于特定列

2 个答案: