Twitter bootstrap 引导自定义旋转木马，带有响应性缩略图图像IE 11和Windows Phone 8浏览器

我在使用最新版本的bootstrap创建带有响应缩略图图像的自定义旋转木马时遇到问题，该版本的bootstrap可以在IE 11和最新的Windows Phone 8浏览器中正确显示响应行为；除了chrome之外，在IE10及以下版本中，一切似乎都正常工作。问题在于，在IE11和Windows Phone浏览器中，图像没有响应，当手动减小屏幕宽度时，缩略图图像会保持原始桌面大小，并超出视口的宽度

我在其他地方也有类似的缩略图像代码，它不在旋转木马中，而且响应迅速，似乎工作得很完美。这一定是我的自定义旋转木马代码

这是我的指南针/sass/css：

.carousel-inner .item {
    text-align: center !important;
}

@media (max-width: 570px) {
    .carousel-control.left {
        left: 0;
    }
    .carousel-control.right {
        right: 0;
    }
}

.carousel.carousel-fade .item {
    @include transition(opacity 0.5s ease-in-out);
    opacity: 0;
}

.carousel.carousel-fade .active.item {
    opacity: 1;
}

.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}

.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
    left: 0;
    z-index: 1;
}

这是我的html：

<div id="carousel-index" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-md-4">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="~/Images/tile1.png" />
                </a>
            </div>
            <div class="col-md-8">
                <h1 class="page-header">Header1</h1>
                <p>Content1</p>
                <ul>
                    <li>Link1</li>
                    <li>Link2</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="~/Images/tile2.png" />
                </a>
            </div>
            <div class="col-md-8">
                <h1 class="page-header">Header2</h1>
                <p>Content2</p>
                <ul>
                    <li>Link3</li>
                    <li>Link4</li>
                </ul>
            </div>
        </div>
    </div>
</div>

校长1
内容1


链接1
链接2

校长2
内容2


链接3
链接4

这段代码位于jumbotron中，因为它位于头中，我想要jumbotron效果。不确定这是否与此有关。它在桌面上看起来很完美，但移动设备已经过时了。提前谢谢