Question

我尝试使用Angular 7-Bootstrap 4和jhipster平台运行应用程序，因此当我打开HTML页面时，它显示了损坏的CSS，但是刷新后，损坏的CSS已修复。

这是jhipster平台，运行Angular 7和webpack和Bootstrap，并在vendor.css文件中配置。因此，在故障页面中，它将CSS与Bootstrap结合在一起。

英语：

@Component({
    styleUrls: ['./order-summary.css']
})

HTML：

<div class="row">
    <div class="list theme-text-color">
        <span class="col-xs-8 card-prevent-overlaps" style="font-size: 15px">
            {{ticket.ticketLevel}}  {{ticket.ticketType}} :
        </span>
        <span class="col-xs-4 text-right text-nowrap" style="font-size: 15px">
        ({{ticket.originPrice}} &#8364;)
    </span>
        <span class="col-xs-4 text-right text-nowrap" style="font-size: 15px">
            {{ticket.price}} &#8362;
        </span>
    </div>
</div>
<div *ngIf="ticket.seat" class="row">
    <div class="list">
        <span class="col-xs-8 card-prevent-overlaps " style="font-size: 15px">
            <span class="card-highlight theme-text-highlight-color">{{ticket.area}}, שורה {{ticket.row}}
                , כיסא
                {{ticket.seat}} </span>
        </span>
    </div>
</div>

VENDOR.CSS：

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

这是刷新之前： enter image description here

这是刷新后： enter image description here

如何修复损坏的CSS并修复刷新后的应用HTML页面

0 个答案: