命名空间样式中断 Bootstrap 轮播过渡

Question

命名空间样式中断转换。

我有一个 Bootstrap 轮播显示上一张和下一张图片。我有不止一个 Bootstrap 轮播，所以我需要为每个轮播设置不同的样式。这样做会中断过渡。

如果您在 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

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

您的转换似乎是 "fighting" 和默认的 bootstrap 东西。这与 .namespace 的关系不大，而是在 CSS 中改变位置，同时 JS 也在改变位置。

我对您的 fiddle 进行了一些快速修改 -- https://jsfiddle.net/TinaBellVance/gavgngng/1/

命名空间样式中断 Bootstrap 轮播过渡

Namespacing styles break Bootstrap carousel transition

sass

twitter-bootstrap

bootstrap-carousel