【发布时间】：2023-03-31 07:53:01
【问题描述】：
app.component.html 代码
<div class="container">
<div class="row" id="ads">
<div class="col-xs-4">
<app-card *ngFor="let car of cars"
[carNotifyBadge]="car.carNotifyBadge"
[carNotifyYear]="car.carNotifyYear"
[carCondition]="car.carCondition"
[carPrice]="car.carPrice"
[carUsageinKM]="car.carUsageinKM"
[carName]="car.carName"
[imgSource]="car.imgSource"
>
</app-card>
</div>
</div>
</div>
app.component.ts 代码
import { Component ,Input} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title:string = "Angular-App"
cars = [
{....},{....},{....}
]
}
card.component.html
<div class="card rounded">
<div class="card-image">
<span class="card-notify-badge">{{carNotifyBadge}}</span>
<span class="card-notify-year">{{carNotifyYear}}</span>
<img class="img-fluid" [src]="imgSource" alt="Alternate Text" />
</div>
<div class="card-image-overlay m-auto">
<span class="card-detail-badge">{{carCondition}}</span>
<span class="card-detail-badge">{{carPrice}}</span>
<span class="card-detail-badge">{{carUsageinKM}}</span>
</div>
<div class="card-body text-center">
<div class="ad-title m-auto">
<h5>{{carName}}</h5>
</div>
<a class="ad-btn" href="#">View</a>
</div>
</div>
card.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
constructor() { }
@Input() carNotifyBadge = '';
@Input() carUsageinKM = '';
@Input() carName = '';
@Input() carNoticarNotifyYearfyBadge = '';
@Input() imgSource = '';
@Input() carCondition = '';
@Input() carPrice = '';
@Input() carNotifyYear = '';
ngOnInit(): void {
}
}
自从在 app.component.html 中，我使用了引导程序的网格系统并使用结构指令 ngFor，我正在向 DOM 动态添加元素。我希望这些列是并排的，而我将它放在彼此下方，如图所示。
如何根据引导行为并排显示列？
【问题讨论】：
-
*ngFor="let car of cars"是col-xs-4的内部元素，因此您可能希望您的car具有col-xs-4类，而不是父元素 -
@MrT 因为 *ngFor 指令将使用 selecor
动态添加 card.component.html 内容。因此，我希望整个选择器能够获得引导类 col-xs-4，因此 选择器位于类“col-xs-4”的 div 上方。能否请您详细说明您的思考过程？ -
您有 1 个 div，即
col-xs-4，包含多辆汽车。所以包含所有汽车的元素不能超过屏幕的 1/3。您真正想做的是每辆车都有col-xs-4类。所以只需将类放在app-card标签上，而不是父div。您可以查看 Chrome 的调试器并查看框的大小，您可能会更好地了解我们的意思。
标签： html css angular bootstrap-4