Question

命名空间样式会中断转换。

我有一个Bootstrap Carousel显示上一张和下一张图片。我有一个以上的Bootstrap Carousel，所以我需要不同的样式。这样做会打破过渡。

如果你在scss文件中评论.namespace命名空间，你会发现它工作正常。这为什么会破裂？什么是可能的解决办法？

见 Not Working Fiddle
请参阅Working Fiddle

HTML

<div class="container-fluid namespace">
    <div class="row">
        <div class="col-md-12 center-block">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-001.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-002.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-003.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

CSS

 .namespace {
    .carousel {
        overflow: hidden;
    }

    .carousel-inner {
        width: 150%;
        left: -25%;
    }

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(33%, 0, 0);
        transform: translate3d(33%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-33%, 0, 0);
        transform: translate3d(-33%, 0, 0);
    }

    .carousel-control.left,
    .carousel-control.right {
        background: rgba(255, 255, 255, 0.3);
        width: 25%;
    }
}

JS

//original code from http://jsbin.com/jadahetoxi/3/edit?html,css,js,output

$(document).ready(function() {
    $('#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));
        }
    });
});

Bootstrap v3.3.6
jQuery v1.11.0

Answer 1

你的两个小提琴输出看起来都一样。也许你已经解决了这个问题我在Mac上的最新版本的Mozilla Firefox中查看它们。也许这是一个特定于浏览器的问题？

看来你的过渡是＆＃34;战斗＆＃34;使用默认的bootstrap东西。它不是那里有.namespace，而是改变CSS中的位置，而JS也改变了这个位置。

我已经对你的小提琴进行了一些快速修改 - https://jsfiddle.net/TinaBellVance/gavgngng/1/

命名空间样式打破了Bootstrap轮播转换

1 个答案: