Bootstrap 4 Beta轮播图箭头异常求助：位置错误+无法切换图片

Hey there, I've spotted a couple of key issues in your code that are causing the arrow positioning and slide switching problems. Let's break them down and fix them:

1. Incorrect Target for Carousel Controls #

Your carousel container has an ID of ce, but your prev/next control links are pointing to #carousel-example instead. Bootstrap uses this target to know which carousel to control—so no wonder the arrows weren't switching slides!

2. Missing Hash in Indicator Target #

The second carousel indicator <li> has data-target="ce" instead of data-target="#ce". Without the #, Bootstrap can't find the correct carousel element to link the indicator to.

3. Malformed Viewport Meta Tag #

While this doesn't directly break the carousel, your viewport meta tag has missing spaces between attributes, which can cause issues with responsive behavior.

Here's the corrected full code with all fixes applied:

<!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="#ce">
      <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>
</body>
</html>

Once you update your code with these changes, the carousel arrows should:

• Position correctly over your images (since they'll be properly attached to the carousel container)
• Work as expected to switch between slides
• The indicators will also function properly now too!

内容的提问来源于stack exchange，提问作者Pier