Twitter Bootstrap轮播响应不正常

好吧我有一个非常简单的问题，我不认为会需要很多示例。基本上我有一个带有1500px x 550px图像的Bootstrap Carousel，它的设置占用了屏幕宽度的100％。当我最小化屏幕时，图像的高度保持不变，而宽度减小使图像变形它被挤在一起。这是我简单的旋转木马：Twitter Bootstrap轮播响应不正常

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

，这里是STHE CSS样式我有它

.carousel { 
     margin-bottom: 60px; 
     margin-top:-16px; 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

    .carousel .item { 
     height: 550px; 
    } 
    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: 550px; 
    }

现在我曾尝试使用媒体查询，但它只是修复了高度的问题进行了一定的屏幕宽度，并且随着屏幕最小化，屏幕最终会变得混乱。这里是我的媒体查询：

@media (max-width: 979px) { 

     .container.navbar-wrapper { 
     margin-bottom: 0; 
     width: auto; 
     } 
     .navbar-inner { 

     margin: 0px 0px -20px 0; 
     } 

     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     width: auto; 
     height: 300px; 
     } 

} 

@media (max-width: 767px) { 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 


     } 
     .carousel .item { 
     height: 350px; 

     } 
     .carousel img { 
     height: 350px; 

     } 


    }

而只是为了让你知道，如果它使用所有引导资产像responsive.css，bootstrap.min.css和boostrap.css

来源

2013-07-13 Lucas Santos

你可能任何额外的帮助IM想要检查是否有某个地方设置了“最小高度”（可能位于引导程序的一个css文件中）。最小高度总是覆盖最大高度设置。

来源

2013-07-13 14:25:01 SkiWether

我试图找到一个解决相同的事情，当我到达你的问题，并以某种方式，它帮助了我很多。

我所做的就是像以前一样使用媒体查询，并为最大或最小宽度后的传送带内部定义高度。顺便说一句，我用BS3和转盘有.IMG响应（）函数那样：

> .item { 
display: none; 
position: relative; 
.transition(.6s ease-in-out left); 
// Account for jankitude on images 
> img, 
> a > img { 
    .img-responsive(); 
    line-height: 1; 
} 
}

这部分似乎应对调整图像的问题。

来源

2013-12-31 13:38:52

不要添加修复的高度，使高度自动这样

.carousel .item { 高度：自动;

} 

.carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: auto; 
}

来源

2015-01-08 17:15:27

小孩，试试这些行。他们为我解决了这个问题。

.carousel .item { 
    margin: 0 auto; 
     min-height: 300px; 
    } 

.carousel-img { 
    margin: 0 auto; 
    min-height: 300px; 
}

我不知道你，但对我来说，这个问题的事实是，我的项目和图像里面，没有任何最小高度。

来源

2015-05-26 02:41:05 Morilon

Twitter Bootstrap轮播响应不正常

回答

相关问题