Question

我有一个引导旋转木马和按钮，我想要在图像上方进行更改，以便从图像更改为图像。无论我做什么，我似乎无法让它成为最重要的，它总是出现在。

我在最外面的div上尝试了相对位置，并且在carousel-control div上相对位置。有什么建议？

HTML:

<div id="carouselExampleControls" class="carousel slide"  data-interval="false" data-ride="carousel">
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
       <img class="mini-img" src="images/plane.png" alt="">
     </div>
     <div class="carousel-item active">
       <img class="mini-img" src="images/truck.png" alt="">
     </div>
     <div class="carousel-item active">
       <img class="mini-img" src="images/boat.png" alt="">
     </div>
     <div class="carousel-controls">
        <ul class="carousel-ul">
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
           <li>
             <button type="button" name="button"></button>
           </li>
        </ul>
      </div>
    </div>



CSS: 

    #carouselExampleControls {
      position: relative;
    }

    .carousel-controls {
      position: absolute;
    }

    .carousel-ul {
      position: absolute;
      list-style-type: none;
    }

Answer 1

.carousel-ul {
      position: absolute;
      top:0;
    }

或html

<ul class="carousel-ul" style="position: absolute; top:0;">

这对我有用

Answer 2

我的建议是使用jquery，因为当你想自定义bootstrap时，最好的方法是使用jquery，例如你可以在div之外创建一个按钮并调用这样的jquery函数：请注意您的按钮ID为#nextButton和#prevButton

$('#nextButton').onClick(function(){ $('.carousel').carousel('next'); })

$('#prevButton').onClick(function(){ $('.carousel').carousel('prev'); }) 有关详细信息，请查看此link

将轮播按钮放在图像顶部

2 个答案: