使用 Angular 10 的 Bootstrap 4 全屏布局

【问题标题】：Bootstrap 4 full screen layout with Angular10使用 Angular 10 的 Bootstrap 4 全屏布局
【发布时间】：2021-05-30 22:38:28
【问题描述】：

我想使用浏览器的全宽。enter image description here

<div class="row">
            <div class="col-3">
                <product-filter [category]="category"></product-filter>
            </div>
    
            <div class="col-9">
                <div class="row">
                    <ng-container *ngFor="let p of filteredProducts; let i = index">
                        <div class="col">
                            <product-card [product]="p" [shopping-cart]="cart"></product-card>
                            <div *ngIf="(i + 1) % 2 === 0" class="row row-cols-2"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>

【问题讨论】：

标签： html angular bootstrap-4

【解决方案1】：

添加container-fluid

Boostrap Containers

.container-fluid for a full width container, spanning the entire width of the viewport.

<div class="row container-fluid">
            <div class="col-3">
                <product-filter [category]="category"></product-filter>
            </div>
    
            <div class="col-9">
                <div class="row">
                    <ng-container *ngFor="let p of filteredProducts; let i = index">
                        <div class="col">
                            <product-card [product]="p" [shopping-cart]="cart"></product-card>
                            <div *ngIf="(i + 1) % 2 === 0" class="row row-cols-2"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>

【讨论】：