Bootstrap 4 Flexbox заставляет ряды заполнять вертикальное пространство внутри - PullRequest
Новая
       17

Bootstrap 4 Flexbox заставляет ряды заполнять вертикальное пространство внутри

0 голосов
/ 03 мая 2018

Я пытаюсь собрать видеопроигрыватель в Bootstrap 4, используя два столбца, один из которых содержит видео, а другой - строки с миниатюрой и заголовком. У меня проблема в том, что строки не заполняют вертикальное пространство своего родительского столбца. Как правильно использовать вспомогательные классы flexbox для создания правильного столбца, который будет заполнять вертикальное пространство независимо от того, как мало элементов? или есть более эффективный способ сделать это в Bootstrap 4?

Это нужный макет, который я ищу enter image description here

<div class="container">
  <div class="row">

    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-sm-block ">
      <div class="row">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
      <div class="row">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Two</div>
      </div>
    </div>

  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Начиная с Bootstrap 4.1.0 , утилиты Flex Grow включены . Просто измените 2-й столбец на <div class="col col-sm-4 d-none d-sm-flex flex-column">, а затем добавьте flex-grow-1 к строкам. Строки справа автоматически заполнят высоту.

https://www.codeply.com/go/CaJxOgoFHX

       <div class="col col-sm-4 d-none d-sm-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video One</div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video Two</div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video Three</div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video Four</div>
            </div>
        </div>

Примечание. При этом используется Bootstrap 4.1.0, включающий класс flex-grow-1.

Связанный: Flexbox 3 деления, два столбца, один с двумя строками

0 голосов
/ 03 мая 2018

Bootstrap версия 4.1.1.

В родительский элемент добавьте классы d-flex и flex-column. Это означает, что вы должны удалить класс d-sm-block, поскольку при наличии d-sm-block, d-flex не работает. А затем добавьте flex-grow-1 к двум row с.

Здесь есть две строки, и они занимают половину доступного пространства. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-flex flex-column">
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Two</div>
      </div>
    </div>

  </div>
</div>

Проверьте это перо на codepen или запустите фрагмент кода.

Здесь есть одна строка, но она занимает все доступное пространство. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-flex flex-column">
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
    </div>

  </div>
</div>

К вашему сведению, если вы хотите, чтобы одна из строк занимала столько места, сколько ей нужно, а другая занимает все доступное пространство, используйте flex-grow-1 только для последней. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">

    <div class="row">
<!-- Main video player -->
        <div class="col-12 col-sm-8">
            <img class="img-fluid" src="http://via.placeholder.com/730x411">
        </div>

<!-- Video Selector -->
        <div class="col col-sm-4 d-none d-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video One</div>
            </div>
            <div class="row ">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video Two</div>
            </div>
        </div>
    </div>
</div>

Bootstrap версии 4.

Bootstrap версии 4 не имеет класса flex-grow-1. В этом случае используйте код ниже. 

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}
...