引導內容滑塊不能正常工作

Question

我正在開發利用的引導和想一個網站讓我的滑蓋是這樣的：

但是我的是這樣的：

.carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 100%; 
 
     margin: auto; 
 
    } 
 
.container { 
 
    width: 100% !important; 
 
    max-width: 600px !important; 
 
    margin: auto !important; 
 
    padding: 0; 
 
    background-color: rgb(21, 138, 188); 
 
} 
 
.carousel-control.left, 
 
.carousel-control.right{ 
 
    background: transparent; 
 
} 
 
a.deposit-now { 
 
    background-color: #e50376; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    border-radius: 10px; 
 
    border: 1px solid #bf053d; 
 
    text-shadow: 5px 5px 5px #333; 
 
}

<div class="container"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="slide-1">     
 
      <h1>150% Welcome Bonus</h1>     
 
      <p>Suspendisse ut semper enim, sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. Vivamus efficitur quam vitae metus mattis pretium ut ut tellus.</p>     
 
      <div class="inner">      
 
       <a href="" class="deposit-now">Deposit Now</a>   
 
       <a href="" class="terms-cond">Terms and Conditions</a>     
 
      </div>    
 
     </div>  
 
     </div> 
 
     <div class="item"> 
 

 
     </div> 
 

 
     <div class="item"> 
 

 
     </div> 
 

 
     <div class="item"> 
 

 
     </div> 
 
    </div> 
 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

如何使導航按鈕始終位於第一張圖片顯示的鏈接之後？ 此外，有沒有辦法讓所有的幻燈片保持高度，同時保持滑塊的響應？

Hope you can edit from my pen

Answer 1

如果您添加到您的CSS，那麼它應該幫助你解決問題。您可以根據您的要求編輯值。

.carousel{ 
    padding: 0 40px; 
} 
.carousel-control{ 
    width: 5%; 
} 

小提琴：http://codepen.io/hunzaboy/pen/dOvaJm

Answer 2

這裏是我的sugestion： 首先你需要的是包裹傳送帶控制-S成格：

<div class="carousel-controls"> 
... 
</div> 

其次你必須設置樣式爲.carousel-controls和.carousel-indicators。

看片段

.container { 
 
    width: 100% !important; 
 
    max-width: 600px !important; 
 
    padding: 0; 
 
    background-color: rgb(21, 138, 188); 
 
} 
 
.carousel-control.left, 
 
.carousel-control.right{ 
 
    background: transparent; 
 
} 
 
a.deposit-now { 
 
    background-color: #e50376; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    border-radius: 10px; 
 
    border: 1px solid #bf053d; 
 
    text-shadow: 5px 5px 5px #333; 
 
} 
 
.carousel-inner { 
 
    padding-bottom:10px; 
 
} 
 
.carousel-controls{ 
 
position:relative; 
 
    width:150px; 
 
    margin:0 auto 30px auto !important; 
 
} 
 
.carousel-indicators{ 
 
    top: 100%; 
 
}

<link rel="stylesheet" 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> 
 
<div class="container"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="slide-1">    \t \t 
 
      <h1>150% Welcome Bonus</h1> \t \t \t \t \t 
 
      <p>Suspendisse ut semper enim, sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. Vivamus efficitur quam vitae metus mattis pretium ut ut tellus.</p> 
 
      <div class="inner"> \t \t \t \t \t \t 
 
       <a href="" class="deposit-now">Deposit Now</a> \t 
 
       <a href="" class="terms-cond">Terms and Conditions</a> \t \t \t \t \t 
 
      </div>    \t 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     
 
     </div> 
 
    
 
     <div class="item"> 
 
     
 
     </div> 
 

 
     <div class="item"> 
 
     
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <div class="carousel-controls"> 
 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
    </div> 
 
</div>