bootstrap col在应占行的一半时不起作用

如何解决bootstrap col在应占行的一半时不起作用

我想在我的布局中使用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张卡片，这些卡片占据了整个页面，在页面底部，我看到了右侧。我在做什么错了？

解决方法

对于Bootstrap网格系统，您只能连续容纳12列。如果在一行中放置超过12列，则每组额外的列将作为一个单元包装在新行上。

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

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

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

您可以使用column breaks来控制每个pre-defined断点每行要多少张卡。

现在，从阅读您的评论开始，我想您要使用的是第一个[() => void]来为页面的左侧和右侧定义50％的拆分。然后在左侧，您希望所有卡都在那里，像这样：

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