Bootstrap 4 所有卡片大小相同（多张或单张）答案

【问题标题】：Bootstrap 4 all cards same size (multiple or single)Bootstrap 4 所有卡片大小相同（多张或单张）
【发布时间】：2018-02-02 22:02:53
【问题描述】：

我在尝试创建包含 N 张卡片（单张或多张）的页面时遇到问题而在多张卡片中，所有卡片都是我想要的，当它是一张卡片时，它会缩小并且不会像我想要的那样呈现：

一张卡片看起来像这样：

我试图了解我做错了什么。

这是卡片的 HTML：

<div class="card text-white bg-danger">
  <div class="card-header">
    <div class="row">
      <div class="col col-xs-3">
        <i class="fa fa-euro">{{expenseItem.amount}}</i>
      </div>
      <div class="col col-xs-9 text-right">
        <div class="d-block huge">{{count}}</div>
        <div class="d-block">{{label}}</div>
        <div class="card-body">
          <div class="row">

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <span class="float-left">Details </span>
    <a href="javascript:void(0)" class="float-left card-inverse">
      <span ><i class="fa fa-arrow-circle-left"></i></span>
    </a>
  </div>
</div>

它位于一个应该是列表的组件内：

<div class="container">
  <div class="row">
    <hr>
  </div>
  <div class="row">
  <div class="page-header">
    <h1 >Comp header</h1>
    <h4> total epenses per month {{expenses.total}}</h4>
   <app-pagination [paginationSize]="limit" [total]="total" (requierdPage)="getPage($event)"></app-pagination>
  </div>
  </div>
  <hr>
<!--<div class="row" >
    <div class="col-xs-3 col-lg-4" *ngFor="let expense of expensesList" >
       <app-expnses-item [expenseItem]="expense"></app-expnses-item>
    </div>

 </div>-->
<!--<div class="container">
  <div class="row">
    <div class="card-deck" *ngFor="let expense of expensesList">
      <app-expnses-item [expenseItem]="expense"></app-expnses-item>
&lt;!&ndash;      <div class="card">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">This is a wider
            card with supporting text below as a natural lead-in to additional content.
            This content is a little bit longer.This is a wider
            card with supporting text below as a natural lead-in to additional content.
            This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>&ndash;&gt;
    </div>
  </div>
  </div>-->
  <div class="row" >
    <div class="col-sm-6 col-xs-6 col-xl-6 col-md-6 col-lg-6" *ngFor="let expense of expensesList">
    <app-expnses-item [expenseItem]="expense"></app-expnses-item>
    </div>
  </div>
  <div class="row add">
   <div class="col-xs-1 offset-xs-1 align-self-sm-end">
     <i class="fa fa-plus-square-o fa-4x" aria-hidden="true" (click)="Uopen()"></i>
   </div>
   <app-add-expense (onFormSubmitted)="onDataSubmit($event)"></app-add-expense>
  </div>
</div>

我在这里错过了什么？

【问题讨论】：

标签： css angularjs twitter-bootstrap bootstrap-4

【解决方案1】：

.card-deck 应该直接放在container 而不是row。删除 .row，因为它是 flexbox，并且应该仅用于包含您不用于 .card-deck 的网格列 (col-*)。

<div class="container">
    <div class="card-deck">
        <div class="card text-white bg-danger">
        </div>
        <div class="card text-white bg-danger">
        </div>
        (repeat 1..n cards)
    </div>
</div>

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

【讨论】：