Bootstrap 4 carousel幻灯片没有动画

Question

大家好，我正在使用Boostrap 4 beta-2，并试图让旋转木马使用幻灯片动画。我让class="item"连接到"carousel-item"类，让它在幻灯片之间切换(这也消除了'offsetWidth undefined'控制台错误。但是，动画仍然不起作用，只是在幻灯片之间跳转。

有谁能给我指个方向吗？我不确定问题出在哪里。(CSS/JS)。控制台中没有错误。

<!--     *********     HEADER 3      *********      -->
<div class="header-3">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item carousel-item active">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container text-left">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="iframe-container">
                                            <iframe height="250" src="https://www.youtube.com/embed/rmfmdKOLzVI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                                        </div>
                                    </div>
                                    <div class="col-md-6 ml-auto mr-auto text-right">
                                        <h1 class="title">On the run tour.</h1>
                                        <h4 class="description ">On the Run Tour: Beyoncé and Jay Z is a 2014 concert special which documents the September 12 and 13, 2014, shows of American singers' Beyoncé and Jay-Z joint co-headlining venture On the Run Tour.</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item carousel-item">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-8 ml-auto mr-auto text-center">
                                        <h1 class="title">Island of legends.</h1>
                                        <h4 class="description ">The islands of Malta and Gozo are brilliant for a family holiday, packed with fun places to visit whatever your children’s ages. The islands’ small size means everywhere is within easy reach.</h4>
                                        <br />
                                        <h5>Connect with us on:</h5>
                                        <div class="buttons">
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-facebook-square"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round  mt-2">
                                                <i class="fa fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item carousel-item">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-6 text-left">
                                        <h1 class="title">Arctic Sea ice.</h1>
                                        <h4 class="description ">According to the National Oceanic and Atmospheric Administration, Ted Scambos, NSIDC lead scientist, puts the potentially record low maximum sea ice extent this year down to low ice extent in the Pacific and a late drop in ice extent in the Barents Sea.</h4>
                                        <br />
                                        <div class="buttons">
                                            <a href="#pablo" class="btn btn-neutral btn-primary btn-lg mr-1">
                                                <i class="now-ui-icons files_single-copy-04"></i> Read More..
                                            </a>
                                            <a href="#pablo" class="btn btn-primary btn-lg">
                                                <i class="now-ui-icons arrows-1_share-66"></i> Subscribe
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <i class="now-ui-icons arrows-1_minimal-left"></i>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <i class="now-ui-icons arrows-1_minimal-right"></i>
        </a>
    </div>
</div>
<!--     *********    END HEADER 3      *********      -->

Answer 1

改变这一点

<div id="carouselExampleIndicators" class="container" data-ride="carousel">

到这个

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

Carousel w/ Indicators documentation

Answer 2

检查项目中是否有多个.css文件。如果你从互联网上下载了一些主题，那么这些风格可能会重写原始的引导类，并影响到你的轮播。