如何在带有嵌入的 Bootstrap 4 中使列高相等？答案

【问题标题】：How to make column heights equal in Boostrap4 with embed?如何在带有嵌入的 Bootstrap 4 中使列高相等？
【发布时间】：2019-09-09 23:18:20
【问题描述】：

我正在创建一个交互式 Web 界面，并且我在引导程序中有一行包含两列。一列包含“embed-responsive-16by9”，另一列包含我不知道高度的 ul。我怎样才能使带有 ul 的列保持嵌入的高度，如果它更大，则溢出，但如果它更小，则不会减少？

我尝试过“.row-eq-height”、设置最大高度等，但似乎没有任何效果。

<div className="container-fluid">
  <div className="row h-40 row-eq-height">
    <div className="col">
      <div className="rounded resize shadow-sm">
        <div className="embed-responsive embed-responsive-16by9">
          <iframe
              className="embed-responsive-item"
              src="https://www.youtube.com/embed/RHXsHZMBIcQ"
              title="Video Player"
          />
        </div>
        <div className="pl-2 pt-2">
          <input className="mr-1" type="checkbox" />
          <label>Autoplay?</label>
        </div>
      </div>
    </div>
    <div className="col">
      <ul className="list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 resize shadow-sm">
        <nav className="navbar navbar-light navbar-right bg-light m-2 p-1">
          <h1 className="navbar-brand">Watched Teams</h1>
          <div className="form-inline my-2 my-lg-0">
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Search"
            />
            <button
              className="btn btn-outline-success my-2 my-sm-0"
              type="submit"
            >
              Search
            </button>
          </div>
        </nav>
        {this.state.teams.map(team => (
          <Team key={team.teamNum} team={team} />
        ))}
      </ul>
    </div>
  </div>
</div>

顺便说一句，我是通过 react 来完成这一切的，所以这在某种程度上是分开的，因为它包含在多个组件中，但为了发帖，这些都是放在一起的。

解决方案：关键是使用 h-100 和 flex-grow-1...我之前都尝试过，但我猜不是直接在 ul 元素上。 <ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">

【问题讨论】：

类名为什么？
我是用 React 写的，所以从技术上讲它是在 JSX 而不是 JS

标签： css twitter-bootstrap bootstrap-4 height

【解决方案1】：

关键是使用 h-100 和 flex-grow-1...我之前都尝试过，但我猜不是直接在 ul 元素上。 <ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">

【讨论】：