引导轮播上的奇怪运动

Question

所以我使用引导程序的轮播插件在我的网站上构建了这个“推荐”滑块，但由于某种原因，当它更改幻灯片时，移动看起来很笨重。我不确定这是否是我在 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

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

---

1. 仅将.active 类应用于第一项。

---

而不是这个：

<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>