无法将Clarity卡显示在单行中

Question

我可以添加一张牌，但当我尝试在一行中添加多张牌时，它们会堆叠在一起。文档中不清楚还需要哪些其他步骤才能使这些内容出现在同一行中。我很乐意手动进行阻塞、设置宽度和高度等操作，但我的理解是这将是动态的，我是误解了模板还是做了一些愚蠢的事情？

<div class="row">
<ng-template ngFor let-tile [ngForOf]="tiles" let-i="index" 
[ngForTrackBy]="trackByFn">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<a href={{tile.url}} class="card clickable">
<div class="card-img">
<img src={{tile.icon}} alt="..." height="42" width="42"/>
</div>
<div class="card-block">
<p class="card-text">
{{tile.text}}
</p>
</div>
</a>
</div>
</ng-template>
</div>

Answer 1

作为Clarity 1.0版本的一部分，旧网格已被弃用：

旧网格(#2757(的弃用

Clarity已经否决了旧的网格，但实际上已经将其从主@clr/ui捆绑包中删除了。如果您仍在使用旧的网格(包括旧的未固定的.row和.col类(，我们提供了一个临时文件，您可以在完全迁移到新的网格类之前将其包括在内。要做到这一点，请将@clr/ui/clr-grid-depleted.css添加到您的项目中。

因此，您可以导入此CSS文件以仍然使用不推荐使用的类，或者移动新网格：https://vmware.github.io/clarity/documentation/v1.0/grid与新网格的不同之处几乎只是在各种类前面加上了clr-。