Boostrap傳送帶頁面指示符錯誤對齊

我的傳送帶傳送帶的頁面指示符位於div容器的中間位置。我不知道爲什麼。我已經遵循w3schools的所有代碼，這是填充問題？任何人都知道如何解決它，謝謝！Boostrap傳送帶頁面指示符錯誤對齊

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

來源

2017-03-11 ZiSean

這是因爲您的旋轉木馬的幻燈片只包含文字「旋轉木馬」和「旋轉木馬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>

來源

2017-03-11 14:44:10

嘗試添加這種風格

.carousel-indicators { top:230px;}

來源

2017-03-11 14:30:55 oneNiceFriend

哦THX，它的工作 – ZiSean

它，因爲你已經使用的項目列表中的文本內容...

如果你只想文本內容進行滾動，然後給它一些適當的大小來填充容器的寬度。

來源

2017-03-11 14:31:12

THX，我終於知道什麼是什麼，你讓我知道旋轉木馬的邏輯 – ZiSean

Boostrap傳送帶頁面指示符錯誤對齊

回答

相關問題