bootstrap 旋转木马上的奇怪动作

Question

所以我在我的网站上使用 bootstrap 的旋转木马插件构建了这个 "testimonial" 滑块，但由于某种原因，当它改变幻灯片时移动看起来很笨重。我不确定这是不是我的在 CSS 上做是因为我在一些元素之上设计了样式，我真的不太了解 CSS..

无论如何，这是我的代码： HTML

<div class="container-fluid">
<div class="row testimonials">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-center">Testimonials</h3>
            </div>
        </div>
        <div class="carousel slide" id="testimonial_slider" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#testimonial_slider" data-slide-to="0" class="active"></li>
                <li data-target="#testimonial_slider" data-slide-to="1"></li>
                <li data-target="#testimonial_slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="row item active">
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                </div>
                <div class="row item active">
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                </div>
                <div class="row item active">
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                    <div class="col-md-6 testimonial">
                        <img src="my-image-url.jpg">
                        <p><i class="fa fa-quote-left"></i> The content</p>
                        <span>The Title</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和 CSS:

.testimonials {
    padding-bottom:30px;
}
.testimonial {
    position:relative;
    height:100px;
    margin:10px 0 20px 0;
    padding:0 20px 20px 120px;
    box-sizing:border-box;
}
.testimonial p i {
    color:#eb7022;
}
.testimonial span {
    position:absolute;
    bottom:0;
    left:130px;
}
.testimonial img {
    height:100px;
    width:100px;
    margin-right:120px;
    border-radius:6px;
    position:absolute;
    top:0;
    left:16px;
}

你也可以看到直播here。

我用这些风格破坏了什么吗？感谢任何帮助，谢谢！

Answer 1

不要将 .row 与 .item 一起使用。

仅将 .active class 应用于第一项。

而不是这个：

<div class="row item active">
  <div class="col-md-6 testimonial">
    <img src="1.jpg">
    <p><i class="fa fa-quote-left"></i> The content</p>
    <span>The Title</span>
  </div>
  <div class="col-md-6 testimonial">
    <img src="1.jpg">
    <p><i class="fa fa-quote-left"></i> The content</p>
    <span>The Title</span>
  </div>
</div>

使用这个：

<div class="item active">
  <div class="row>
    <div class="col-md-6 testimonial">
      <img src="1.jpg">
      <p><i class="fa fa-quote-left"></i> The content</p>
      <span>The Title</span>
    </div>
    <div class="col-md-6 testimonial">
      <img src="1.jpg">
      <p><i class="fa fa-quote-left"></i> The content</p>
      <span>The Title</span>
    </div>
  </div>
</div>

bootstrap 旋转木马上的奇怪动作

Weird movement on bootstrap carousel

css

slider

carousel

twitter-bootstrap