Question

我正在尝试获取图像列表的网格2列

使用以下代码：

<div class="row">
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
</div>

=>网格显示2列效果很好

但是当我尝试使用ngFor创建网格时：

<div class="row">
    <div *ngFor="let asset of assets">
        <div class="col-md-6">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
        </div>
    </div>
</div>

=>不显示2列网格，而是显示一个列列表

任何建议都值得赞赏。

Answer 1

.col必须位于.row的正下方，就像第一个示例一样。我不确定您为什么在这里引入了另一个div。

<div class="row">
    <div *ngFor="let asset of assets" class="col-md-6">
        <img src="http://...225636.png"
             style="width: 100%; height: auto;">
    </div>
</div>

Answer 2

这项工作：

<div class="row">
    <div class="col-md-6" *ngFor="let asset of assets">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
    </div>
</div>

Answer 3

或者，将ng-container用作消失的“元素”。

<div class="row">
    <ng-container *ngFor="let asset of assets">
        <div class="col-md-6">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
        </div>
    </ng-container>
</div>

当您不能引入中间元素（例如在<ul>及其<li>的直接子元素之间）时，此功能最为有用。

Angular和Bootrap 4：使用ngFor破坏网格

3 个答案: