Bootstrap 4 Flexbox强制行填充col内的垂直空间

Question

我正在尝试使用两列创建一个Bootstrap 4中的视频播放器，一列包含视频，另一列包含带缩略图和标题的行。我遇到的问题是行没有填充其父列的垂直空间。使用flexbox辅助类创建一个填充垂直空间的右列的正确方法是什么，无论它有多少项？或者在Bootstrap 4中有更有效的方法吗？

这是我想要的所需布局

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

Answer 1

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>

选中此pen on 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;
}

Answer 2

自Bootstrap 4.1.0 起，Flex grow utilities are included。只需将第二列更改为void *calculate(void *i){ sem_wait(&s); int j=(*((int*)i)); ，然后将<div class="col col-sm-4 d-none d-sm-flex flex-column">添加到行。右侧的行将自动填充高度。

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

flex-grow-1

注意：这使用Bootstrap 4.1.0，其中包含 <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> 类。

相关：Flexbox 3 divs, two columns, one with two rows