Question

所以我使用bootstrap的carousel插件在我的网站上构建了这个“推荐”滑块但由于某种原因，当它改变幻灯片时，这个动作看起来很笨拙..我不确定它是不是我在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课程应用于第一项。

而不是：

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

引导转盘上的奇怪运动

1 个答案: