css - 具有固定长度和高度的 Angular Bootstrap 卡。有没有办法减少代码？

标签 css angularjs html angularjs-ng-repeat

我想知道是否有更简单的方法将固定数量的固定尺寸的卡片分布在三行中？

目前，我正在对分布在 3 行中的所有 33 张卡片进行硬编码 - 每行 11 张。 请原谅我的代码，我是初学者，仍在学习中。任何帮助都将不胜感激。提前致谢! :)

我的 HTML 代码向您展示了我决定如何展示卡片的信息。 我添加了 Angular 分量以供引用。

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';


@Component({
  selector: 'app-agvdashboard',
  templateUrl: './agvdashboard.component.html',
  styleUrls: ['./agvdashboard.component.css'],
})
export class AgvdashboardComponent {
  /** Based on the screen size, switch from standard to one column per row */
  
  constructor(){}

  
}





<html>
  <head>
  
     <!--Container description starts here-->
  
  </head><div class="container">

  <h2 class="Heading-dashborad">AGV-Dashboard</h2>

  <!-- Selecting Load No from the drop down menu -->

  <app-loadselector></app-loadselector>

  <!-- Button triggers which are displayed after selecting load No -->
  <div class="load-unload-buttons">
    <div class= "invisible">
    <button type="button" class="btn btn-primary" tooltip="Click to Load">
   Load
  </button>
  <button type="button" class="btn btn-primary" tooltip="Click to Unload">
    Unload
  </button>
  </div>
</div>

<app-agvcard></app-agvcard>
 
 
<div class="top-dashboard-details">
 <div class="row ">
    
         
         <div class="col-md-1">
          
            <div class="card" ngbPopover="Load No.1
            RowNo.2
            SSCC1: 3576046640081210
            SSCC2: 3576046640081210
            SSCC3: 3576046640081210
            " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
                <div class="card-body">
                    <h4 class="card-title">Material No.</h4>
                    <p class="card-text">61617</p>
                  </div>
                </div>
              
</div>

<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
</div>
</div>


<div class="middle-dashboard-details">
<div class="row">
   <div class="col-md-1">
      <div class="card" ngbPopover="Load No.1
      RowNo.2
      SSCC1: 3576046640081210
      SSCC2: 3576046640081210
      SSCC3: 3576046640081210
      " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
          <div class="card-body">
              <h4 class="card-title">Material No.</h4>
              <p class="card-text">61617</p>
            </div>
          </div>
        </div>

 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
</div>
</div>


<div class="bottom-dashboard-details">
<div class="row">
    <div class="card" ngbPopover="Load No.1
            RowNo.2
            SSCC1: 3576046640081210
            SSCC2: 3576046640081210
            SSCC3: 3576046640081210
            " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
                <div class="card-body">
                    <h4 class="card-title">Material No.</h4>
                    <p class="card-text">61617</p>
                  </div>
                </div>

<div class="col-md-1">    
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
</div>
</div>

</div>

</html>

最佳答案

enter image description here

您好，我认为这是显示数据的更好方式。 在你的 AgvcardComponent 上我添加了这个:

export class AgvcardComponent implements OnInit {
  cards = {
   ngbPopover: 'Load No.1 RowNo.2 SSCC1: 3576046640081210 SSCC2: 3576046640081210 
   SSCC3: 3576046640081210',
   triggers: 'mouseenter:mouseleave',
   popoverTitle: 'Pop title',
   cardTitle: 'Material No.',
   cardText: '61617'
  };
  elements = [];
  constructor() { }
  ngOnInit() {
  for (let i = 0; i < 11; i++) {
    this.elements.push(this.cards);
   }
  }

}

然后在AgvcardComponent模板中:

<!-- Top -->
<div class="top-dashboard-details">
  <!-- <div class="row"> -->
   <div *ngFor="let el of elements" class="col">
     <div class="card">
       <div class="card-boddy">
      <h6 class="card-title">
        {{el.cardTitle}}
      </h6> 
      <p class="card-text">
        {{el.cardText}}
      </p>
    </div>
   </div>
  </div>
 <!-- </div> -->
</div>

<!-- Middle -->
<div class="middle-dashboard-details">
 <!-- <div class="row"> -->
  <div *ngFor="let el of elements" class="col">
  <div class="card">
    <div class="card-boddy">
      <h6 class="card-title">
        {{el.cardTitle}}
      </h6> 
      <p class="card-text">
        {{el.cardText}}
      </p>
      </div>
    </div>
  </div>
 <!-- </div> -->
</div>

<!-- Bottom -->
<div class="bottom-dashboard-details">
<!-- <div class="row"> -->
  <div *ngFor="let el of elements" class="col">
   <div class="card">
     <div class="card-boddy">
       <h6 class="card-title">
        {{el.cardTitle}}
       </h6> 
       <p class="card-text">
        {{el.cardText}}
       </p>
     </div>
   </div>
 </div>
<!-- </div> -->
</div>

最后，我向该组件添加了一些 SCSS:

* {
    padding: 0 !important;
    margin: 0 !important;
}
.top-dashboard-details, .middle-dashboard-details, .bottom-dashboard-details {
    margin-bottom: 10px !important;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-gap: 10px;
 .card {
    padding: 5px !important;
 }
}

关于css - 具有固定长度和高度的 Angular Bootstrap 卡。有没有办法减少代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53818979/

上一篇：css - 使用 Button React 更改 .scss

下一篇：javascript - 如何使用本地存储来维护下拉菜单状态？

相关文章：

javascript - AngularJS:ui-router 安全状态

html - 如何在按钮组中分隔 btn？

Html 在更多行上创建下拉列表

html - 更大的内跨度的外跨度宽度？

javascript - Safari 中的 html5 视频自动播放延迟

javascript - Bootstrap 在不同的屏幕上无法正常工作

c# - ASP.Net MVC : How can I easily change the tab color of my navigation menu based on the tab that I'm on?

html - AngularJS - 我可以在 HTML 文件中显示文档吗？

javascript - Typeahead-addresspicker - JS 支持

html - 谷歌地图停留在左上角

©2024 IT工具网  联系我们