时间戳

首页 > 解决方案 > 引导列大小等于特定列

html - 引导列大小等于特定列

问题描述

我有 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>

MysecondColumn的高度高于firstColumn，但我希望它具有与 相同的高度，firstColumn同时也可以滚动。

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

标签： htmlcssbootstrap-4

解决方案

使用弹性盒！

.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定义溢出，如示例中所示。

推荐阅读