具有可变列长的boostrap div

Question

在我的HTML页面中，我有2个聚会 第二部分并不总是显示。

我希望如果未显示第二部分，则第一部分占据页面宽度的100％ 我的代码：

<div class="container-fluid  d-flex flex-row">
  <div>
      1st part
  </div>
   <div [hidden]="viewDetails()">
       2nd part
   </div>

Answer 1

使用flex-grow-1 ...

<div class="container-fluid d-flex flex-row">
    <div class="flex-grow-1">
        1st part
    </div>
    <div>
        2nd part
    </div>
</div>

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

另一种选择是使用Bootstrap网格（如Codeply中所示）和col类，该类也将flex-grow:1应用于该列。

Answer 2

您可以通过在bootstrap中使用col类来实现。它使用了尽可能多的空间：

<div class="row">
  <div class="col"> Some content </div>
  <div class="col"> Some content </div>
</div>

如果两个“ cols”都在代码中，则每个都占据50％的空间，如果仅存在一个，则col延伸超过100％。 您也可以使用col-md-2给一个col固定，例如，另一个col类将覆盖剩余的可用空间。