试。
我试图将Bootstrap的Carousel实施到我的网页中。然而，我遇到了一些问题。
旋转木马的图像显示在彼此的顶部。导航按钮不会显示。这是使用Bootstrap的CSS v4.0.0 Beta。
如果我将Bootstrap CSS文件版本更改为3.7，则轮播可以正常工作，但其他依赖于bootstrap 4的东西当然会停止工作。
这是我查看的错误，还是Bootstrap 4Beta中的错误？
这是HTML代码。
/*Custom Irie Vibes colors.*/
.bg-irie-yellow {
background-color: #E7DD96;
}
.bg-irie-grey {
background-color: #41403E;
}
.bg-irie-red{
background-color: #CF7654;
}
.text-white {
color: white;
}
/*Only applies to classes irie-green when navbar-brand is also used*/
.navbar-brand.irie-green{
color: #EDCE4F;
font-weight: bolder;
text-shadow: 9BA573 1 1 20px;
}
/*Makes the navbar just a little thinner than default (overwrite)*/
.navbar-nav > li > a {
padding-top:5px !important;
padding-bottom:5px !important;
}
.navbar {
min-height:32px !important;
}
/*A fix for Bootstrap's broken img-responsive*/
.img-responsive {
max-width:100%;
padding: 10px;
}
/*Leave some space between the content and the navbar*/
.container.content{
padding-top: 45px;
}
/*Styling for the Language buttons on the right*/
.nav-link.language {
font-style: oblique;
letter-spacing: 0.5px;
}
/*Change the color of the dropdown menu's*/
.navbar-nav > li > .dropdown-menu {
background-color: #CF7654;
padding-left: 20px;
border: 0px;
}
.nav-link{
padding: .2rem 1rem;
}<html>
<head>
<!-- Setting things up so they work correctly. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<!-- Custom style sheet -->
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Load overwrite style sheet as last to enable overwriting Bootstrap features -->
<link rel="stylesheet" href="/src/css/main.css">
<title>Irie Vibes Roots Festival - Home</title>
</head>
<body class="bg-irie-yellow">
<header>
<!-- The header contains everything that displays as or above the nav-bar -->
<!--HEADER IMAGE-->
<div class="bg-irie-grey text-center">
<img class="img-responsive" src="http://i.imgur.com/BUu5PPO.png">
</div>
<!--NAVIGATION-->
<nav class="navbar navbar-expand-lg navbar-dark bg-irie-red">
<div class="container">
<!-- This allows the Navbar to become smaller on a smaller mobile device. -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"></a>
<a id="irie-green" class="navbar-brand irie-green" href="#">3rd Week of July</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tickets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Programme</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Irie Vibes For Kids</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="nav-link drop-2" href="#">Green Forward</a></li>
<li><a class="nav-link drop-2" href="#">Volunteers</a></li>
<li><a class="nav-link drop-2" href="#">Motivation</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partners</a>
</li>
</ul>
<span class="navbar-text">
<!-- This is the language selector. -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link language text-white" href="#">Nederlands</a>
</li>
<li class="nav-item active">
<a class="nav-link language text-white" href="#">English <span class="sr-only">(current)</span></a>
</li>
</ul>
</span>
</div>
</div>
</nav>
</header>
<!-- This is the main container that encapsulates evberything. -->
<div id="content" class="container content">
<!-- Row containing Carousel and News -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-xs-6">
<!-- Carousel -->
<div id="Slideshow" class="carousel slide" data-ride="carousel">
<!-- Indicator Dot Navigation -->
<!-- Wrapper for the slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="rounded" src="/src/img/slideshow/slide1.png" alt="Slide1"/>
<div class="carousel-caption ">
<p>Slider 1</p>
</div>
</div>
<div class="item">
<img class="rounded" src="/src/img/slideshow/slide2.png" alt="Slide2"/>
<div class="carousel-caption ">
<p>Slider 2</p>
</div>
</div>
<!-- Navigation Control Buttons -->
<a class="left carousel-control" href="#Slideshow" role="button" data-slide="prev">
<span class="flyphicon flyphicon-shevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#Slideshow" role="button" data-slide="next">
<span class="flyphicon flyphicon-shevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</body>
<!--Loading bootstrap scripts at the end of the page to prevent slowdowns-->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>
提前致谢！
一个人的爱， 安娜