我的网站有一年多的历史了。今年年初,我做了一些修改,同时安装了 npm,因为由于某种原因,在启动 Angular 时没有找到所有软件包(版本 5,现在版本 9 也有同样的问题)。安装 npm 后,我遇到了几个问题,其中最烦人的一个是轮播。由于某种原因,滑动时,转盘会从下面的“行”滑动下一张幻灯片,然后将幻灯片提升到适当的位置。这种效果看起来完全愚蠢,我以前对此没有任何问题。尽管我也尝试过 4.4.1,但 bootstrap 版本与 4.3.1 相比没有变化。
代码:
<div class="event-slider">
<div id="carouselEvents" *ngIf="events && events.length > 0" class="carousel slide" data-ride="carousel">
<div *ngIf="events" class="carousel-inner">
<div *ngFor="let event of events; first as isFirst" class="carousel-item" [class.active]="isFirst">
<span class="one-line"><i>Tuleva tapahtuma:</i></span>
<!--<div class="one-line" [fittext]="true" [activateOnResize]="true" [maxFontSize]="30"><b>{{event.name}}</b></div>-->
<span class="one-line">{{event.startDateTime | date: 'dd.MM.yyyy HH:mm'}}</span>
<div class="one-line">
<a *ngIf="authService.loggedIn()" routerLink="/events/{{event.id}}">Lue lisää</a>
<a *ngIf="!authService.loggedIn()" routerLink="/events">Kaikki tapahtumat</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselEvents" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselEvents" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
有什么想法吗?附一张描述问题的照片。
最佳答案
终于找到了解决方案:由于某种原因,CSS 在更新后开始表现不同。事件 slider CSS 和轮播项目定义之间存在冲突。我只是从 carousel-item 类中删除了 margin: auto ,瞧!
关于bootstrap-4 - 当幻灯片更改时,Bootstrap 轮播使用两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60427945/