Question

我在尝试创建包含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>

我在这里错过了什么？

Answer 1

.card-deck应直接放在container而不是row。移除.row作为flexbox，并且仅应用于包含您未用于col-*的网格列（.card-deck）。

<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

Bootstrap 4所有相同尺寸的卡（多个或单个）

1 个答案: