為什么下一個箭頭沒有顯示？
[英]Why isn't the next arrow showing?
問題描述
我試圖在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>
2 個解決方案
解決方案1
0 2018-01-13 23:48:08
您是否在有序列表的第二個li元素中缺少＃符號？
<li data-target="ce" data-slide-to="1"></li>
應該：
<li data-target="#ce" data-slide-to="1"></li>
解決方案2
0 已采納 2018-01-17 21:55:18
這里有幾件事要注意。
- 首先，將
.carousel的id設置為ce，您應該在整個標記中進行此更改。 即，您必須設置指標的data-target屬性以及輪播控件的href值。 后面的是箭頭！ - 其次，由於將圖片的寬度設置為固定的500px，而
.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>
為什么導航欄無法在Bootstrap中正確顯示？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.