Angular Bootstrap css：强制最后一列连续填充剩余的空白空间

Question

在我的 Angular5 应用中，我有一个容器组件，我用它来声明一个行，其中包含一些以 n列组织的组件喜欢以下内容：

  <div class="row  mx-5 my-5 h-75 w-80">
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
      <myComponent1></app-myComponent1>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent2></myComponent2>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent3></myComponent3>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent4></myComponent4>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent5></myComponent5>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
      <myComponent6 ></myComponent6>
    </div>
     .... 
  </div>

由于我的列数（n）是可变的，并且我在每行中按3组织列（col-md-4）

KO：在某些情况下，最后一列不会填充空白区域（这是我的目标）。

我已尝试使用以下CSS，但它没有解决我的问题：

.row :last-child {
width: 100%;
height: 100%;
}

我正在寻找如何使用 Bootstrap 或 Angular指令本地执行此操作，或者使用一些响应式CSS处理来获取此类最终视图：

建议？

Answer 1

使用js查找最后一行中是否有2或1列。如果是，请从最外面的列中删除col-md-4 col-lg-4个类，然后使用flex-grow-1。

如果最后一行中有两列

＆＃13;

＆＃13;

/* This code is two outline the columns */

.row>div {
  height: 400px;
  border: 1px solid red;
}

＆＃13;

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


<div class="row  mx-5 my-5 h-75 w-80">
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent1>
      </app-myComponent1>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent2></myComponent2>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent3></myComponent3>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent4></myComponent4>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent5></myComponent5>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
  <div class="m-0 p-0 flex-grow-1" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果最后一行中有一列

＆＃13;

＆＃13;

.row>div {
  height: 400px;
  border: 1px solid red;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="row  mx-5 my-5 h-75 w-80">
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent1>
      </app-myComponent1>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent2></myComponent2>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent3></myComponent3>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent4></myComponent4>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent5></myComponent5>
  </div>
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>

  <div class="m-0 p-0 flex-grow-1" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请记住使用最新版本的Bootstrap-4，因为较低版本没有flex-grow-1。否则，请使用以下代码。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

您可以使用columns.length % 3 > 0检查最后一行中是否有two或one列。如果是，请移除col-md-4并添加flex-grow-1。

＆＃13;

＆＃13;

var columns = document.getElementsByClassName('col-md-4');

// check if there are less than three column in the last row
if (columns.length % 3 > 0) {
  var lastColumn = columns.item([columns.length - 1])
  lastColumn.classList.remove("col-md-4")
  lastColumn.classList.add("flex-grow-1")
}

＆＃13;

.row > div {
  height: 400px;
  border: 1px solid red;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row  mx-5 my-5 h-75 w-80">
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent1>
      </app-myComponent1>
  </div>
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent2></myComponent2>
  </div>
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent3></myComponent3>
  </div>
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent4></myComponent4>
  </div>
  <div class="col-md-4  m-0 p-0" *ngIf="simpleSearchSrcdAccess">
    <myComponent5></myComponent5>
  </div>
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
    <myComponent6></myComponent6>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我使用col-md-4只是告诉你该怎么做，但你必须使用一个唯一的类名，这样才不会干扰其他代码。

＆＃13;

＆＃13;

// unique-class-name should be used on all 'col-md-4' divs
var columns = document.getElementsByClassName('unique-class-name');

＆＃13;

＆＃13;

＆＃13;