Masonry 无法与 Bootstrap 5 和 Angular 13 一起使用

Question

我在我的网站（https://mypleaks.com）上沿着 Bootstrap 5 和 Angular 13 新实现了砌体。

我引用了来自 https://getbootstrap.com/docs/5.1/examples/masonry/ 的示例并添加了

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

我已经动态创建了卡片，如下所示：

<div class="container-lg content-container mt-lg-5 pr-lg-3 pl-lg-3 pt-lg-2 mt-3 p-0">
    <div class="row" data-masonry='{"percentPosition": true }' style="position: relative; height: 1068px;">
        <div class="col-sm-6 col-lg-4 mb-4" *ngFor="let content of contentList">
            <div class="card" [class.remove-card-border]="content.contentType === advertisement">
                <img *ngIf="content.attachments" [src]="content.attachments[0].identifier" class="card-img-top">
                <div *ngIf="content.contentType != advertisement" class="card-body">
                    <h5 class="card-title">{{ content.title }}</h5>
                    <p class="card-text">{{ content.contentText }} <a [href]="content.externalUrl" class="text-nowrap" target="_blank">read more</a></p>
                    <div class="btn-toolbar d-flex justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
                        <div class="btn-group mr-3 input-group" role="group" aria-label="First group" ngbTooltip="good enough, people should know">
                            <button type="button" [disabled]="evaluationClicked" class="btn btn-success" placement="top"
                            (click)="upVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
                            <div class="input-group-prepend">
                                <div class="input-group-text">{{content.promoteCount}}</div>
                            </div>
                        </div>
                        <div class="btn-group ml-3 input-group" role="group" aria-label="Second group" ngbTooltip="fake or not good enough">
                            <div class="input-group-prepend">
                                <div class="input-group-text">{{content.rejectCount}}</div>
                            </div>
                            <button type="button" [disabled]="evaluationClicked" class="btn btn-danger" placement="top"
                            (click)="downVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-down fa-flip-horizontal" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div *ngIf="content.contentType === advertisement" class="d-flex justify-content-center">
                    <app-google-ads></app-google-ads>
                </div>
            </div>
        </div>
    </div>
</div>

不知何故，样式没有在 myPleaks 上更新，类似于 bootstrap 示例，请参阅下面的代码片段

引导示例

预先感谢您的帮助。

Answer 1

我使用了

masonry-layout

，而不是直接使用

ngx-masonry

。以下是 package.json 依赖项。并参考文档这里

"masonry-layout": "^4.2.2",
"ngx-masonry": "^13.0.0"

在app.module.ts中添加以下模块

将动态代码包裹在标签

<ngx-masonry [options]="myOptions">

中，并在组件实现中添加以下配置。

public myOptions: NgxMasonryOptions = {
gutter: 10};

Answer 2

从 bootstrap 4 升级到 5.3，并且必须迁移已弃用的

card-columns

类。 Bootstrap 建议使用第三方砌体库 (https://getbootstrap.com/docs/5.3/components/card/#masonry)。 正如 @raj-bhatia 建议的那样，我还使用

ngx-masonry

，它是所述库的 ng 包装器。

bootstrap 示例 (https://getbootstrap.com/docs/5.3/examples/masonry/) 在 Angular 中看起来像这样：

<ngx-masonry [options]="{ percentPosition: true }" class="row">
    <div *ngFor="let col of columns" class="col-sm-6 col-lg-4" ngxMasonryItem>
        <div class="card">{{ col }}</div>
    </div>
</ngx-masonry>

我注意到 gutters 选项在 bootstrap5 中效果不佳，因此请使用行的 gutters 类（例如：

class="row g-3"

）