twitter-bootstrap Bootstrap 响应式轮播无法正确调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14842044/
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 Responsive Carousel doesn't resize properly
提问by edwardmp
I'm using Bootstrap and I have a carousel under my navbar.
我正在使用 Bootstrap，并且我的导航栏下有一个轮播。
It works OK on normal computers, check this link.
它在普通计算机上工作正常，请检查此链接。
However, I'm having trouble on smaller screens, e.g. iPhone. Just resize your browser screen to see what I mean.
但是，我在较小的屏幕上遇到了麻烦，例如 iPhone。只需调整浏览器屏幕的大小即可了解我的意思。
I'm figuring maybe it isn't necessary the responsive CSS but something else I' doing wrong. Maybe their are better ways to get the carousel image with resized on every screen.
我想也许响应式 CSS 不是必需的，但我做错了其他事情。也许他们是在每个屏幕上调整大小的轮播图像的更好方法。
Also, I would like the carousel to have a 100% height of the screen, so the carousel spans the entire screen, and the rest of the content shows only when you scroll.
此外，我希望轮播具有 100% 的屏幕高度，因此轮播跨越整个屏幕，其余内容仅在您滚动时显示。
CSS I'm using:
我正在使用的 CSS：
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-top: -80px;
position: fixed;
width: 100%;
}
.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 {
min-height: 800px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: auto;
margin-top: -200px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption2 {
background-color: transparent;
position: static;
max-width: 380px;
padding: 200px 20px;
}
.carousel-caption h1,
.carousel-caption .lead,
.carousel-caption2 h1,
.carousel-caption2 .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn,
.carousel-caption2 .btn {
margin-top: 10px;
}
#wrapper-container {
margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
background: inherit;
top: 60%;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
}
.carousel .item {
min-height: 500px;
}
.carousel img {
min-width: 100%;
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
回答by mccannf
There's a lot you would need to do to clean it up... The following will get you started, but there would definitely be a bit more tweaking to do.
你需要做很多事情来清理它......下面将帮助你开始，但肯定会有更多的调整要做。
I didn't look at the CSS to fill the screen with an image as per your last request. I think you will have to look at adding a different carousel with other cropped images with a portrait aspect ratio if you want that, so you show the specific part of the image you want.
我没有根据您的上次请求查看 CSS 以用图像填充屏幕。我认为，如果您愿意，您将不得不考虑使用其他具有纵向纵横比的裁剪图像添加不同的轮播，以便显示所需图像的特定部分。
Firstly under @media (max-width: 767px), remove:
首先在 下@media (max-width: 767px)，删除：
.navbar-inner {
margin: -20px;
}
It's causing your menu bar at the top to shift up out of sight.
这会导致顶部的菜单栏移到视线之外。
From @media... .carousel, remove:
从@media... .carousel，删除：
margin-left: -20px;
margin-right: -20px;
This is messy, and is there because of the padding added to body (see below).
这是乱七八糟的，这是因为添加到正文中的填充（见下文）。
Add the following to @media (max-width... .carousel:
将以下内容添加到@media (max-width... .carousel：
position: relative;
margin-top: 0px;
Because you want the carousel to sit neatly under the navbar.
因为您希望旋转木马整齐地放置在导航栏下方。
Remove the following from @media... body
从以下内容中删除 @media... body
padding-right: 20px;
padding-left: 20px;
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-containerif you want.
这会导致轮播出现问题，您可以wrapper-container根据需要为特定的 div 添加此填充。
From .carousel img, remove:
从.carousel img，删除：
margin-top: -200px;
Next, you have to fix the fact that the text under the carousel is moved way down:
接下来，您必须解决旋转木马下的文本向下移动的事实：
Add the following to @media... #wrapper-container
将以下内容添加到 @media... #wrapper-container
top: 0;
Remove the following from @media (max-width: 979px)
从以下内容中删除 @media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
and the following from @media (max-width: 767px)
以及以下来自 @media (max-width: 767px)
.carousel img {
height: 300px;
}
because the carousel is nowhere near that height at smartphone sizes.
因为旋转木马远不及智能手机尺寸的高度。
You will also have to play around with the positioning of the caption text in the @media CSS. You may want to decide to lose some caption text as the carousel shrinks.
您还必须在 @media CSS 中调整标题文本的位置。您可能想要决定在轮播缩小时丢失一些标题文本。
This will get you started, and you can go from there...
这会让你开始，你可以从那里开始......
回答by markt
For starters, get rid of the margin-top: -200px; on your .corousel img style. With a small screen, your image height is less than 200px and this causes it to go off of the screen.
首先，去掉 margin-top: -200px; 在您的 .corousel img 样式上。对于小屏幕，您的图像高度小于 200 像素，这会导致它离开屏幕。
