我正在尝试建立一个类似电子商务的网站。我有两个轮播，一个在顶部，一个在末尾，似乎一个在末尾有一些问题。轮播似乎在末尾时不起作用。如果我将最后一个旋转木马放到开头，它会适当渲染。仅当我使用Visual Studio制作带有崇高文字的视图时，才会出现此问题。
<!DOCTYPE html>
<html>
<head>
<title>MoShop</title>
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap-grid.csscss">
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap-reboot.css">
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="../Css/BootStrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../Css/Index/index.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pr-5 pl-5 " style="">
<a class="navbar-brand" href="#">MoShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline my-2 my-lg-0">
<select class="form-control" placeHolder="Categorie" id="categoriesNavBar">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input class="form-control mr-sm-2" type="search" id="searchNavBar" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="collapse navbar-collapse justify-content-end " id="navbarSupportedContent" >
<ul class="navbar-nav float-right ">
<li class="nav-item active">
<a class="nav-link" href="#" >Nom Client <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Conexion</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Panier</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="" id="bodyContent">
<div class="" id="featured">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<h1>En vedette</h1>
<div class="carousel-inner">
<div id="carousel-info">
<div class="carousel-item carousel-item-MainFeatured active">
<h2>Nom de l'article</h2>
<img class="d-block w-100 ohOui img-fluid align-items-center" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="First slide" style="width: 600px !important; margin:auto;">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="carousel-item carousel-item-MainFeatured">
<h2>Nom de l'article</h2>
<img class="d-block w-100 ohOui img-fluid align-items-center" style="width: 600px !important;" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="First slide">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="carousel-item carousel-item-MainFeatured ">
<h2>Nom de l'article</h2>
<img class="d-block w-100 ohOui img-fluid align-items-center" style="width: 600px !important;" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="First slide">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container" style="margin-top: 40px;" id="subFeatured">
<div class="subFeaturedItem" style="background-color: white;">
<h3 >Nom Categorie</h3>
<div class="card " >
<img class="card-img-top" style="width: 100%;" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png">
<h5 class="card-title">Nom du produits</h5>
<p class="card-text">Prix</p>
<a href="#" class="btn btn-primary" style=" margin:0 auto; width: 90%;">Ajouter au panier</a>
</div>
</div>
<div class="subFeaturedItem" style="background-color: white;">
<h3 >Nom Categorie</h3>
<div class="card " >
<img class="card-img-top" style="width: 100%" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png">
<h5 class="card-title">Nom du produits</h5>
<p class="card-text">Prix</p>
<a href="#" class="btn btn-primary" style="margin:0 auto;width: 90%;">Ajouter au panier</a>
</div>
</div>
<div class="subFeaturedItem" style="background-color: white;">
<h3 >Nom Categorie</h3>
<div class="card " >
<img class="card-img-top" style="width: 100%" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png">
<h5 class="card-title">Nom du produits</h5>
<p class="card-text">Prix</p>
<a href="#" class="btn btn-primary" style="margin:0 auto;width: 90%;">Ajouter au panier</a>
</div>
</div>
<!--on met la categorie dans un iframe pour eviter que bootstrap.css viennent niquer la page-->
</div>
<div id="categorieFeatured" >
<h2>Nom categorie</h2>
<div id="categorieDisplay">
<div id="categorieDisplayItem">
<div id="carouselDisplayItem" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" style="width: 80%; margin:0 auto;" >
<div class="carousel-item row active" >
<div class="container">
<div class="row">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="Second slide">
</div>
</div>
</div>
<div class="carousel-item row">
<div class="container">
<div class="row">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="Second slide">
</div>
</div>
</div>
<div class="carousel-item row">
<div class="container">
<div class="row">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="">
<img style="width: 30%;" class="d-block col-sm" src="../img/1wvs43Hrz0CzRQf1qSGuQ.png" alt="Second slide">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselDisplayItem" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" style="outline: black;" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselDisplayItem" role="button" data-slide="next">
<span class="carousel-control-next-icon" style="outline: black;" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer style="height: 50px;" class=" navbar-dark bg-dark pr-5 pl-5">
<p style="margin-left: 5%;" class="navbar-brand">Par Mohamed Keita</p>
</footer>
</body>
</html>