Bootstrap Video Carousel 播放按钮/左右指示器未出现

Question

所以我尝试制作一个包含 4 个视频的轮播，但遇到了一些问题，但不知道为什么。首先我只能使用屏幕底部中间的圆圈来切换视频，我不能点击左右或视频来切换。当我确实向左移动时效果很好，但是当我向右移动时，播放按钮会出现在左侧指示器应该在的位置，当我播放视频时它会弹回中间。任何帮助将不胜感激，因为我在这里相当难过。这是我的代码。 提前致谢。

<div id="help--video-help-carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#help--video-help-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="1"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="2"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <video width="900" height="600" border="5" controls="controls">
                    <source src="help1.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 1</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help2.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 2y</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help3.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 3</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help4.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption d-none d-md-block">
                </div>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 4</h3>
                </div>
            </div>
            <a class="carousel-control-prev" href="#help--video-help-carousel" 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="#help--video-help-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

Answer 1

Johan 关于 item 必须是 carousel-item 是正确的。这为我修复了代码。此外，将轮播包装在容器中似乎可以修复控件。您可能还想为控件、标题和指示器添加下边距。

<div class="container-fluid col-8 offset-2">
<div id="help--video-help-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators" style="margin-bottom: 60px;">
        <li data-target="#help--video-help-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="1"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="2"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <video width="900" height="600" border="5" controls="controls">
                <source src="help1.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 1</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help2.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 2y</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help3.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 3</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help4.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 4</h3>
            </div>
        </div>
        <a class="carousel-control-prev" href="#help--video-help-carousel" role="button" data-slide="prev" style="margin-bottom: 60px;">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#help--video-help-carousel" role="button" data-slide="next" style="margin-bottom: 60px;">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Screenshot of carousel

Answer 2

在 Bootstrap v4.x（最新）中，单个轮播元素类不是“item”而是“carousel-item”。

您还仅在其中一个充其量不一致的元素上设置了一个类“d-none d-md-block”。 您可能想查看 Bootstraps 在轮播https://getbootstrap.com/docs/4.1/components/carousel/#slides-only 中对对齐的使用，他们在示例中的所有元素上使用 'd-block' (class="d-block w-100")。

尚未测试，但可能就是这样。