为什么不显示下一个箭头？

Question

我试图在 Bootstrap 4 beta 中创建一个旋转木马，一切正常，但下一个箭头不在正确的位置，如果你使用彩色背景，你会看到：它没有打开图片。箭头也不会滑动图像。我试图复制 w3schools 控件代码（您可以在此处找到：https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp），但没有成功。之后我搜索了错别字，但没有找到。请问可以帮忙吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>


<div class="carousel slide" id="ce" data-ride="carousel">
    <!-- Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#ce" data-slide-to="0" class="active"></li>
        <li data-target="ce" data-slide-to="1"></li>
    </ol>


    <!-- Inner -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img style="width:500px;" src="photo.jpeg">
        </div>

        <div class="carousel-item">
            <img style="width:500px;" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg">
        </div>
    </div>

    <!-- Carousel control -->
    <a class="carousel-control-prev" data-slide="prev" href="#carousel-example">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#carousel-example" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


</body>
</html>

Answer 1

您是否遗漏了有序列表中第二个 li 元素中的 # 符号？

<li data-target="ce" data-slide-to="1"></li>

应该是：

<li data-target="#ce" data-slide-to="1"></li>

Answer 2

这里有两点需要注意。

首先，由于您已将 .carousel 的 id 设置为 ce，您应该在整个标记中跟进此更改。也就是说，您必须设置指标的 data-target 属性，以及轮播控件的 href 值。后面的就是箭头了！
其次，您没有看到图像上方的箭头（或至少是正确的箭头），因为您已将图像的宽度设置为固定的 500 像素，而 .carousel 填满了所有可用的宽度。这意味着图像没有填满轮播的宽度，但右箭头贴在轮播的右侧。

在下面的示例中，您还会看到一些关于我所做的更改的评论。

<!-- Note `id="ce"`, all `data-target` and control `href` has to match this  -->
<div class="carousel slide" id="ce" data-ride="carousel">
    <!-- Indicators-->
    <ol class="carousel-indicators">
        <!-- Note `data-target="#ce"` -->
        <li data-target="#ce" data-slide-to="0" class="active"></li>
        <li data-target="#ce" data-slide-to="1"></li>
    </ol>

    <!-- Inner -->
    <div class="carousel-inner">
        <!--
        The size of `.carousel-item`s should be the same,
        so the first image now has the same proportion as the img in the secod slide.
        Additionally all images set to `width: 100%`.
        -->
        <div class="carousel-item active">
            <img class="w-100" src="http://via.placeholder.com/708x421/c1ae9f/ffffff?text=First+Photo">
        </div>
        <div class="carousel-item">
            <img class="w-100" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg">
        </div>
    </div>

    <!-- Carousel control -->
    <!-- Note `href="#ce"` too -->
    <a class="carousel-control-prev" href="#ce" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#ce" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

为什么不显示下一个箭头？

Why isn't the next arrow showing?

twitter-bootstrap

twitter-bootstrap-4

twitter-bootstrap-4-beta