引导内容滑块不能正常工作

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>