列中固定宽度的引导卡（响应式）答案

【问题标题】：Bootstrap card with fixed width in a column (responsive)列中固定宽度的引导卡（响应式）
【发布时间】：2020-04-13 04:36:35
【问题描述】：

我有一个Bootstrap-card，但它的width 有问题。我想那张卡片会占用我设置的列。这是我使用的一段代码和屏幕截图，它显示了实际宽度和想要的宽度（蓝色背景）。

您知道有什么好的解决方案可以让我的目标固定下来吗？请考虑响应式视图。

<div class="row">
    <ng-container *ngFor="let event of events">
        <div class="col-12 col-lg-6 d-flex mt-5">
            <!-- Card -->
            <div class="card shadow-light-lg lift lift-lg">
                <a class="card-body my-auto">
                    <div class="d-flex justify-content-between align-content-center align-items-center py-3">
                        <!-- some content -->
                        <h3 class="mt-auto">
                            {{event.title}}
                        </h3>

                        <div class="mb-0 text-muted" id="card-description">
                            {{event.description}}
                        </div>
                    </div>
                </a>
            </div>
        </div>
        ...
    </ng-container>
</div>

【问题讨论】：

你能提供你的问题的sn-p吗？

标签： css bootstrap-4 bootstrap-cards

【解决方案1】：

未正确应用宽度。要么给出 100% 的宽度。其次，您使用的是 display-flex。所以像父母一样有弹性然后项目被赋予相应的宽度。

请在 stackblitz 上分享您的代码，以便我们更好地为您提供帮助。调试起来会容易得多。

【讨论】：