將引導程序傳送帶指示符垂直放置在傳送帶右側的問題

我正在嘗試將引導程序傳送帶指示符對齊到垂直位置，並在頁面右側找到它們。將引導程序傳送帶指示符垂直放置在傳送帶右側的問題

正如你可以在下面的演示中看到（請檢查連接鏈路上Bootply，因爲我不知道爲什麼指標仍然看起來像在的jsfiddle水平）

你可以從看demo我已經在.carousel-indicators上設置了right: 5%;，但是你正在渲染幾乎在旋轉木馬的中間！你能讓我知道我做錯了什麼嗎？

.carousel-indicators { 
 
    background-color:#000; 
 
    position: absolute; 
 
    bottom: 200px; 
 
    z-index: 15; 
 
    width: 30px; 
 
    margin-left: 20px; 
 
    list-style: none; 
 
    text-align: center; 
 
    right: 5%; 
 
} 
 
.carousel-indicators li{ 
 
    display: block; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.carousel-indicators .active { 
 
width: 12px; 
 
height: 12px; 
 
margin-bottom: 10px; 
 
background-color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/1920x400/333/333" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x400/333333/333333" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x400/333/333" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

來源

2016-11-03 Mona Coder