锚点"button"放入类时不起作用"row"



这里是Web初学者。我正在尝试使用一张幻灯片中包含多个项目的引导转盘。转盘使用";行";课堂上把三个项目放在一张幻灯片上。第一个项目的锚起作用;按钮";不要做第二项和第三项。它们甚至无法点击。如果我取出<div class="row">,按钮现在可以点击,但项目将放在一列中。我该怎么解决这个问题?如有任何帮助,我们将不胜感激。这是一张幻灯片的html。

<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<a href="{{rtn[0]['url']}}">
<img class="card-img-top" src="{{rtn[0]['urlToImage']}}" alt="Card image cap" style="width:348px; height:233px; overflow:hidden; object-fit:cover;">
</a>
<div class="card-body">
<h4 class="card-title" style="height:116px;">{{rtn[0]['title']}}</h4>
<a class="btn btn-primary" href="{{rtn[0]['url']}}">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<a href="{{rtn[1]['url']}}">
<img class="card-img-top" src="{{rtn[1]['urlToImage']}}" alt="Card image cap" style="width:348px; height:233px; overflow:hidden; object-fit:cover;">
</a>
<div class="card-body">
<h4 class="card-title" style="height:116px;">{{rtn[1]['title']}}</h4>
<a class="btn btn-primary" href="{{rtn[1]['url']}}">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{{rtn[2]['urlToImage']}}" alt="Card image cap" style="width:348px; height:233px; overflow:hidden; object-fit: cover;">
<div class="card-body">
<h4 class="card-title" style="height:116px;">{{rtn[2]['title']}}</h4>
<a class="btn btn-primary" href="{{rtn[2]['url']}}">Read More</a>
</div>
</div>
</div>
</div>
</div>

为什么不使用*ngFor迭代rtn元素?每个元素使用相同的HTML

<div class="carousel-item active">
<div class="row">
<div class="col-md-4" *ngFor="let element of rtn">
<div class="card mb-2">
<a href="{{element['url']}}">
<img class="card-img-top" src="{{element['urlToImage']}}" alt="Card image cap" style="width:348px; height:233px; overflow:hidden; object-fit:cover;">
</a>
<div class="card-body">
<h4 class="card-title" style="height:116px;">{{element['title']}}</h4>
<a class="btn btn-primary" href="{{element['url']}}">Read More</a>
</div>
</div>
</div>
</div>

我想明白了。旋转木马上有我在上面的代码中没有显示的指示符。这些指示器阻止了锚按钮的点击,所以我在CSS中将它们设置为{pointer-events:none}。谢谢你的帮助。

最新更新