twitter-bootstrap Bootstrap Carousel 没有响应
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16310972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel Not Being Responsive
提问by Mike Fisher
I'm working on a simple landing page that has the bootstrap carousel at the top of the page. For the most part it works and resizes fine. If I go from a normal width to a small width browser it resizes fine. However when I make the browser size extra large everything on the page resizes except the carousel. I'm not sure what I'm doing wrong.
我正在处理一个简单的登录页面,页面顶部有引导程序轮播。在大多数情况下,它可以正常工作并且可以很好地调整大小。如果我从正常宽度转到小宽度浏览器,它会很好地调整大小。但是,当我将浏览器的大小设置得特别大时,页面上的所有内容都会调整大小,但轮播除外。我不确定我做错了什么。
Here's a live link to the site: http://dev.mikefisherdesign.com/stackstrap
这是该站点的实时链接:http: //dev.mikefisherdesign.com/stackstrap
Any help would be greatly appreciated!
任何帮助将不胜感激!
回答by Zim
The images inside your carousel appear to be around 960px wide so once the browser is resized beyond that the images are not stretching inside the carousel .item..
轮播内的图像看起来大约 960 像素宽,因此一旦浏览器调整大小超过该图像不会在轮播内拉伸 .item..
You should be able to fix this in your CSS with:
你应该能够在你的 CSS 中解决这个问题:
.item img {
width:100%;
}
回答by apsolut
for 980 and small screens i did:
对于 980 和小屏幕,我做了:
@media (max-width: 979px) {
#myCarousel.carousel img {
width: 100%;
height: auto;
}
}
@media (max-width: 470px) {
#myCarousel.carousel img {
max-width:300%;
width:150%;
min-height: 300px;
}
}

