0

我想为我的布局使用 Bootstrap 网格系统。我想为我的卡片分配页面左侧，为其他东西分配右侧，但我看到的是它占用了我的卡片的整个宽度：

<div class="container-fluid">
    <div class="row">
        <div class="col-6" *ngFor="let t of rslt">
            <mat-card  class="cards">{{t.turbine_name}}</mat-card>
        </div>
        <div class="col-8">
            right side
        </div>
    </div>
</div>

对于我的卡，我有以下 css：

.cards{
    margin: 1px;
    height: 50px;
    width: 150px;
}

我有大约 100 张卡片占据整个页面，在页面底部我看到右侧。我究竟做错了什么？

4

1 回答 1

1

Bootstrap 网格系统只能在一行中放置 12 列。如果单行中放置了超过 12 列，则每组额外的列将作为一个单元换行。

确切的措辞在 Bootstrap 文档中：https ://getbootstrap.com/docs/4.5/layout/grid/#column-wrapping

因此，在您的情况下，由于您有一个 for 循环来生成每列占用 6 列的卡片（col-6），理论上每行可以容纳 2 张卡片：

在此处输入图像描述

演示： https ://jsfiddle.net/davidliang2008/nd72h5jf/5/


您可以使用分栏符来控制每个预定义断点每行需要多少张卡片。


现在通过阅读您的评论，我认为您想要的是使用第一个<div class="col-6" />为页面的左侧和右侧定义 50% 的拆分。然后在左侧，你想要你所有的卡片，像这样：

在此处输入图像描述

演示： https ://jsfiddle.net/davidliang2008/nd72h5jf/7/

于 2020-08-12T14:08:45.130 回答