Bootstrap轮播项目捕捉到位并改变父div的高度

Question

我制作了一个带有三列物品的自举旋转木马。

当幻灯片过渡结束时，项目会卡入到位并非常简短地更改父div的高度。

我花了一整天的时间试图找到一个解决方案却看不到任何东西！当幻灯片发生时，我假设它与填充/边距有关。我试过强迫物品没有填充或边距但没有运气。

有谁知道这个问题？有什么明显的东西我不见了吗？

问题页面的链接是here

代码本身：

.tourenEvents {
  background: #2a2a2a;
}
.tourenEvents .tourenEventsInner {
  padding-top: 30px;
  padding-bottom: 50px;
  color: #fff;
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock {
  margin: 0 !important; /* This was one of the attempts to fix the issue */
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock img {
  width: 100%;
}

/* == Carousel Control styles - I don't think the issue comes from here but I'm posting it just incase == */
#tourenCarousel .carousel-indicators {
  display: none;
}
#tourenCarousel .carousel-control {
  background-image: none !important;
  color: #fff;
  font-size: 50px;
  top: 15vh;
  opacity: 1;
  -webkit-text-stroke: 2px #2a2a2a;
  text-shadow: none;
}
@media (max-width: 768px) {
  #tourenCarousel .carousel-control {
    padding-top: 10vh;
  }
}
#tourenCarousel .carousel-control:hover {
  color: #fff;
}
#tourenCarousel .carousel-control:focus {
  color: #fff;
}
#tourenCarousel .left {
  padding-right: 15px;
}
#tourenCarousel .right {
  padding-left: 15px;
}

    <div class="tourenEvents col-sm-12">
      
        <div class="tourenEventsInner col-lg-12 col-md-offset-1 col-md-10 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 text-center">
            <h3 class="text-center">Check out our events</h3>
            <!-- div:tourenCarousel is the carousel of events -->
            <div id="tourenCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#tourenCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#tourenCarousel" data-slide-to="1"></li>
                    <li data-target="#tourenCarousel" data-slide-to="2"></li>
              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                  <div class="item active">
                      <div class="col-xs-10 col-xs-offset-1">
                          <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                              <a href='#'><img src="images/tourentipps/events1.png" alt="Events 1"></a>
                              <p class="lightPara">Lorem ipsum dolor</p>
                              <h4>Lorem ipsum dolor</h4>
                              <p class="lightPara">Lorem ipsum dolor</p>
                          </div>
                          <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                              <a href='#'><img  src="images/tourentipps/events2.png" alt="Events 2"></a>
                              <p class="lightPara">Lorem ipsum dolor</p>
                              <h4>Lorem ipsum dolor</h4>
                              <p class="lightPara">Lorem ipsum dolor</p>
                          </div>
                          <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                              <a href='#'><img  src="images/tourentipps/events3.png" alt="Events 3"></a>
                              <p class="lightPara">Lorem ipsum dolor</p>
                              <h4>Lorem ipsum dolor</h4>
                              <p class="lightPara">Lorem ipsum dolor</p>
                         </div>
                    </div>
                </div>
                <div class="item">
                   <div class="col-xs-10 col-xs-offset-1">
                    <div class="carouselBlock col-lg-4col-xs-10 col-xs-offset-1 text-center">
                        <a href='#'><img class="img-responsive" src="images/tourentipps/events2.png" alt="Events 2"></a>
                        <p class="lightPara">Lorem ipsum dolor</p>
                        <h4>Lorem ipsum dolor</h4>
                        <p class="lightPara">Lorem ipsum dolor</p>
                   </div>
                   <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                       <a href='#'><img class="img-responsive" src="images/tourentipps/events3.png" alt="Events 3"></a>
                        <p class="lightPara">Lorem ipsum dolor</p>
                        <h4>Lorem ipsum dolor</h4>
                        <p class="lightPara">Lorem ipsum dolor</p>
                   </div>
                   <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                       <a href='#'><img class="img-responsive" src="images/tourentipps/events1.png" alt="Events 1"></a>
                       <p class="lightPara">Lorem ipsum dolor</p>
                       <h4>Lorem ipsum dolor</h4>
                       <p class="lightPara">Lorem ipsum dolor</p>
                   </div>
                </div>
          </div>
          <div class="item">
            <div class="col-xs-10 col-xs-offset-1">
                <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                    <a href='#'><img class="img-responsive" src="images/tourentipps/events3.png" alt="Events 3"></a>
                    <p class="lightPara">Lorem ipsum dolor</p>
                    <h4>Lorem ipsum dolor</h4>
                    <p class="lightPara">Lorem ipsum dolor</p>
               </div>
               <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                   <a href='#'><img class="img-responsive" src="images/tourentipps/events1.png" alt="Events 1"></a>
                    <p class="lightPara">Lorem ipsum dolor</p>
                    <h4>Lorem ipsum dolor</h4>
                    <p class="lightPara">Lorem ipsum dolor</p>
               </div>
               <div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
                   <a href='#'><img class="img-responsive" src="images/tourentipps/events2.png" alt="Events 2"></a>
                    <p class="lightPara">Lorem ipsum dolor</p>
                    <h4>Lorem ipsum dolor</h4>
                    <p class="lightPara">Lorem ipsum dolor</p>
               </div>
            </div>
      </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#tourenCarousel" role="button" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#tourenCarousel" role="button" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>
        </div>
    </div>

Answer 1

删除width:100%

上的.tourenEvents .tourenEventsInner .carousel .item .carouselBlock img

您正在调整活动类的宽度。