猫头鹰旋转木马切割格

问题描述：

我有一个小问题。我使用OwlCarousel 2，使“证言转子/滑块”，但它看起来像这样：猫头鹰旋转木马切割格

但我需要somethink这样 - 图像板缺之上：

我收拾“盒子”在一个更多的div，但它不是解决它。
这里是我的HTML：

<div> 
    <div class="testimonial-box"> 
     <div class="testimonial-content"> 
      <div class="testimonial-logo"> 
       <img src="http://placehold.it/100x100" alt="" class="img-responsive img-thumbnail pull-left" /> 
      </div> 
      <p> 
       <!-- CONTENT --> 
      </p> 
      <div class="testimonial-meta"> 
       <p> 
        <h5>Lorem Ipsum</h5> 
        <span>, <i>Web Developer</i></span> 
       </p> 
       <p class="website"> 
        <a href="http://vrs-factory.pl">VRS-Factory</a> 
       </p> 
      </div> 
     </div> 
    </div> 
</div>

和CSS [上海社会科学院]：

section.testimonials { 
     padding: 30px 0; 

     .testimonial-logo { 
      img { 
       margin-top: -88px; 
      } 
     } 

     .testimonial-content { 
      border: 1px solid rgba($SecondColor, .2); 
      border-radius: 3px; 
      padding: 20px; 
     } 

     .testimonial-meta { 
      h5 { 
       display: inline-block; 
       margin-bottom: 0; 
      } 
     } 

     .owl-carousel { 
      .owl-item { 
       img { 
        width: auto; 
       } 
      } 
     } 
    }

UPDATE： 这里是演示：DEMO

能否请您分享一些的jsfiddle（jsfiddle.net）来重现问题吗？您提供的代码与您的问题不完全相同。 –

@VincentG当然，我添加了链接 – Vertisan

答

这是因为.owl-carousel .owl-stage-outer的overflow: hidden。

我在.owl-item上加了一个margin-top来修复它。

.owl-item { margin-top: 70px; }

Live example

猫头鹰旋转木马切割格

相关推荐