css - Angular 引导 css : Force Last Column In a Row To Fill Remaining Empty Space

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 处理来获得这样的最终 View :

建议？

Answer 1

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

如果最后一行有两列

/* This code is two outline the columns */

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

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

如果最后一行有一列

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

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

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

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

---

更新

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

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")
}

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

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

我使用 col-md-4 只是为了告诉您要做什么，但您必须使用唯一的类名，这样它就不会干扰其他代码。

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