引导轮播的对齐和加载问题答案

【问题标题】：Alignment and loading issues with bootstrap carousel引导轮播的对齐和加载问题
【发布时间】：2016-01-12 20:10:22
【问题描述】：

我有一个引导轮播，可以一次将 3 张幻灯片加载到视图中。我无法将下一个和上一个背景设置为白色，而不是渐变。在响应式设计中使用时还需要弄清楚对齐方式，以便幻灯片在 iPhone/Android 的移动设备尺寸下一次只显示一个，以及在幻灯片开始时隐藏上一个按钮。

HTML

    <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-xs-4">
                <div class="review">
                    <p lang="en" dir="ltr">Model S can take you anywhere, come and test drive <a href="http://t.co/NTad8VVhGB">http://t.co/NTad8VVhGB</a>  <a href="http://t.co/xWlvrnDZMG">pic.twitter.com/xWlvrnDZMG</a>

                    </p>&mdash; Tesla Motors (@TeslaMotors) <a href="https://twitter.com/TeslaMotors/status/652149926000889856">October 8, 2015</a>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4">
                <div class="review">
                     <h4>Review Title here</h4>

                    <p>by reviewer</p>
                    <hr>
                    <p>Content of review here. Content of review here. Content of review here.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

jQuery

$('#myCarousel').carousel({
    interval: 10000
})

$('.carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

CSS

    .review {
    border: 1px solid #eee;
    padding: 5px 10px 5px 10px;
    min-height: 200px;
    max-height: 200px;
    */
}
.carousel-inner .active.left {
    left: -33%;
}
.carousel-inner .active.right {
    left: 33%;
}
.carousel-inner .next {
    left: 33%
}
.carousel-inner .prev {
    left: -33%
}
.carousel-control.left {
    background-color: #fff;
    opacity: 1;
    -webkit-box-shadow: 10px 0 35px -2px #888;
    box-shadow: 10px 0 35px -2px #888;
    height: 200px;
}
.carousel-control.right {
    background-color: #fff;
    opacity: 1;
    -webkit-box-shadow: -10px 0 35px -2px #888;
    box-shadow: -10px 0 35px -2px #888;
    height: 200px;
}

JSFIDDLE：LINK

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

您可以删除您的 jquery、您的 css 并尝试为每个块重复 html；他们可以隐藏一些移动尺寸的块。这只是一个想法。

【讨论】：

【解决方案2】：

好的，看了Fiddle之后，我想我可能已经猜到了问题，

激活的实际上是<iframe>，而似乎“不起作用”的实际上是复制的 html DOM，因此它的行为与 iframe 不完全相同，因为在本地DOM 中加载（复制粘贴）一些外国DOM 时会发生很多变化（CSS、CSS 规则优先级等）。

【讨论】：