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 или Угловыми директивами или какой-нибудь адаптивной обработкой CSS для получения такого окончательного вида:

Предложения

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');