Question

我将bootstrap carousel默认设置从默认的chevron-left更改为menu-left和right。我添加了图片链接。我将默认高度更改为270px并将其更改为容器。

我的问题是箭头浮动到顶部以及图像链接，当它们滚动链接时，链接在更改时滚过箭头。

#carousel-wrap {
    background-color: #0b0b0b;
    height: 270px;
}

.carousel-control.left, .carousel-control.right{
background: none !important;
filter: progid:none !important;
}

<section id="carousel-wrap">
  <div id="carousel1" class="carousel slide container" data-ride="carousel">      
      <div class="carousel-inner" role="listbox">
        <div class="item active">
        <img src="resources/media/referrals/hub-logo.png" alt="First slide image" class="center-block">          
        </div>
        <div class="item">
        <img src="resources/media/referrals/hub-logo.png" alt="Second slide image" class="center-block">         
        </div>
        <div class="item">
        <img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">          
        </div>
        <div class="item">
        <img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">          
        </div>
      </div>
      <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
      <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
      </div>
</section>

Answer 1

要垂直居中箭头，您可以使用line-height属性（轮播的高度）：

.carousel-control.left,
.carousel-control.right {
  background: none !important;
  line-height: 270px;
}

对于图像，您可以使用此技术：

.item {
  height: 270px;
}
.item img {
  max-height: 100%;  
  max-width: 100%; 
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto;
}

定制Boostrap 3旋转木马

1 个答案: