引导列大小等于特定列[重复]答案

【问题标题】：Bootstrap column size equal to a specific column [duplicate]引导列大小等于特定列[重复]
【发布时间】：2018-12-11 01:37:45
【问题描述】：

我有 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 相同的高度，同时还可以滚动。

我想提一下，我的列处于模式中，当用户单击按钮时，会从我的数据库中加载数据并填充模式。因此，如果我将它们的高度设置为相等，则在页面加载时它将不起作用。

【问题讨论】：

尽管它是重复的，但这个问题与其他问题略有不同。它询问如何缩短 div，而不是增加它们。

标签： html css bootstrap-4

【解决方案1】：

我可以推荐的最好的方法是使用 resize jQuery 事件来查看两个 div 的高度，并将较短的高度设置为较高的高度。

类似这样的：

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

您可能也希望它在页面打开时运行，因此您可以将内容设置为一个命名函数，您可以在就绪触发器和调整大小触发器中调用该函数。

【讨论】：

【解决方案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 并按照示例中所示定义溢出。

【讨论】：