Question

我的页面指示器为boostrap carousel转到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>

Answer 1

尝试添加此样式

  .carousel-indicators { top:230px;}

Answer 2

因为您在项目列表中使用了文本内容...

如果您只想滚动文字内容，请给它一些合适的尺寸来填充容器的宽度。

Answer 3

这是因为您的旋转木马的幻灯片只包含文字＆＃34; Carousel＆＃34;和＆＃34;轮播2＆＃34;而不是背景。因此，旋转木马的高度只是文字的高度，而不是背景的高度。

试试这个：

.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>

Boostrap轮播页面指示器错误对齐

3 个答案: