Bootstrap 4 具有可变列长度的boostrap div

在我的HTML页面中，我有两个聚会 第二部分并非始终显示

我想，如果第二部分不显示，第一部分占页面宽度的100% 我的代码：

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

第一部分
第二部分

使用

flex-grow-1

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

第一部分
第二部分

---

另一个选项是使用引导网格（如代码层中所示）和

col

类，该类也将

flex grow:1

应用于列。

您可以通过在引导中使用col类来实现这一点。它使用尽可能多的可用空间：

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

一些内容
一些内容

如果两个“col”都在代码中，则每个col占用50%的空间，如果只有一个col，则col的长度超过100%。 您还可以给一个col一个fixed，例如：

col-md-2

，另一个

col

类将跨越剩余的可用空间