Как сделать высоту столбцов равной в Boostrap4 с помощью embed? - PullRequest
Новая
       17

Как сделать высоту столбцов равной в Boostrap4 с помощью embed?

0 голосов
/ 19 апреля 2019

Я работаю над созданием интерактивного веб-интерфейса, и у меня есть строка в начальной загрузке с двумя столбцами. Один столбец содержит «embed-responseive-16by9», а другой - ul, высота которого я не знаю. Как бы я мог сделать так, чтобы столбец с ul оставался высотой вставки, переполняясь, если он больше, но не уменьшаясь, если он меньше?

Я пробовал ".row-eq-height", устанавливал max-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>

Кстати, я делаю все это через реакцию, так что это несколько разделено, так как состоит из нескольких компонентов, но все это воедино ради поста.

РЕШЕНИЕ: ключ использовал 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">

1 Ответ

0 голосов
/ 19 апреля 2019

Ключ использовал 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">

...