我的Boostrap旋转木马的页面指示器进入了Div容器的中间。我不知道为什么。我遵循W3Schools的所有代码，这是填充问题？任何人都知道如何解决它，谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #f6f6f6; /* Grey */
color: black;
}
.bg-3 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
/*.container{
padding-top: 200px;
padding-bottom: 200px;
}*/
.footer-size{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
}
.navbar {
padding-top: 8px;
padding-bottom: 8px;
border: 0;
border-radius: 0;
margin-bottom: 0;
letter-spacing: 3px;
}
@media (min-width: 1200px) {
.container{
max-width: 1000px;
padding-top: 200px;
padding-bottom: 200px;
}
}
@media (min-width: 1200px) {
.container-fluid{
max-width: 970px;
}
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="./">Home</a></li>
<li><a href="">About</a></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Product</a>
<ul class="dropdown-menu">
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
</ul>
</li>
<li><a href="">Career</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</div>
</nav>
<br><br><br>
<!-- Container-->
<div class="container bg-1 text-center">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators for carousel-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slide -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h3 class="margin">Carousel</h3>
</div>
<div class="item">
<h3 class="margin">Carousel 2</h3>
</div>
</div>
</div>
</div>
<div class="container bg-2 text-center">
<h4 class="margin">Example</h3>
</div>
<div class="container bg-3 text-center">
<h5 class="margin">Example</h3>
</div>
<footer class="footer-size text-center">
<a href=""></a>
<p>
Copyright 2017 Example | All Rights Reserved</p>
</footer>
</body>
</html>
尝试添加此样式
.carousel-indicators { top:230px;}
是因为您已经在项目列表中使用了文本内容...
如果您只想滚动文本内容，请给它一些适当的尺寸以填充容器的宽度。
这是因为您的旋转木马的幻灯片仅包含文本"旋转木马"one_answers"旋转木马2"，而不是背景。因此，轮播的高度仅是文本的高度，而不是背景的高度。
尝试以下操作：
.container{
max-width: 1000px;
/*remove your padding*/
}
#myCarousel {
height:500px /*give a specific height*/
/* If you put images into your carousel slide, you don't have to add
this as the carousel will take the size of the images*/
}
这是您的标记
<div class="container text-center">
<br>
<div id="myCarousel" class="carousel slide bg-1" data-ride="carousel">
<!-- Indicators for carousel-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slide -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h3 class="margin">Carousel</h3>
</div>
<div class="item">
<h3 class="margin">Carousel 2</h3>
</div>
</div>
</div>
</div>