幻灯片更改时，Bootstrap 轮播使用两行答案

【问题标题】：Bootstrap carousel uses two rows when slide changes幻灯片更改时，Bootstrap 轮播使用两行
【发布时间】：2020-06-11 03:42:07
【问题描述】：

我对一个已有一年多历史的网站有疑问。今年年初我做了一些修改，同时进行了 npm install，因为由于某种原因，在启动 angular 时没有找到所有包（版本 5，现在与 9 相同的问题）。在 npm install 之后，我遇到了几个问题，最烦人的一个是轮播。出于某种原因，在滑动时，旋转木马会从下面的“行”中滑动下一张幻灯片，然后将幻灯片提升到适当的位置。这种效果看起来完全愚蠢，我之前对此没有任何问题。 bootstrap 版本从 4.3.1 没有变化，虽然我也试过 4.4.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>

有什么想法吗？附上描述问题的照片。

【问题讨论】：

你能不能给一些你的html的sn-ps代码？要查看轮播的结构？
是的，对不起，我的愚蠢错误忘记了这一点。添加到原帖。关于这一点的一些注释，fittext 行被注释掉了，我想看看这是否导致了问题（fittext 是一个额外的库，用于调整长文本的字体大小以适应屏幕，尤其是在移动设备上），但它没有不。图片是那个确切的代码。无论有没有评论，问题都是一样的。此外，单行 CSS 类只是一些填充和不换行，也经过测试，不管有没有它都没有效果。
我也有同样的问题..

标签： bootstrap-4 carousel

【解决方案1】：

终于找到了解决方案：由于某种原因，CSS 在更新后开始表现不同。事件滑块 CSS 和轮播项目定义之间存在冲突。我只是从 carousel-item 类中删除了 margin: auto ，瞧！

【讨论】：