Bootstrap 响应式轮播无法正确调整大小 [英] Bootstrap Responsive Carousel doesn't resize properly
问题描述
我正在使用 Bootstrap，并且我的导航栏下方有一个轮播.
I'm using Bootstrap and I have a carousel under my navbar.
它在普通计算机上运行正常，请查看此链接.
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.
我想也许响应式 CSS 不是必需的，但我做错了其他事情.也许他们是在每个屏幕上调整大小的轮播图像的更好方法.
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.
此外，我希望轮播图的高度为屏幕的 100%，因此轮播图横跨整个屏幕，其余内容仅在您滚动时显示.
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.
我正在使用的 CSS:
CSS I'm using:
/* 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;
}
}
推荐答案
你需要做很多事情来清理它......下面将帮助你开始，但肯定会有更多的调整要做.
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.
我没有按照您的上次请求查看 CSS 以使用图像填充屏幕.如果需要，我认为您将不得不考虑添加不同的轮播和其他具有纵向纵横比的裁剪图像，以便显示所需图像的特定部分.
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.
首先在@media (max-width: 767px)下，删除:
.navbar-inner {
margin: -20px;
}
这会导致顶部的菜单栏移到视线之外.
It's causing your menu bar at the top to shift up out of sight.
从 @media... .carousel，删除:
margin-left: -20px;
margin-right: -20px;
这是乱七八糟的，是因为向正文添加了填充(见下文).
This is messy, and is there because of the padding added to body (see below).
将以下内容添加到 @media (max-width... .carousel:
position: relative;
margin-top: 0px;
因为您希望轮播位于导航栏下方.
Because you want the carousel to sit neatly under the navbar.
从 @media... body
padding-right: 20px;
padding-left: 20px;
这会导致轮播出现问题，如果需要，您可以为特定的 div 添加此填充，例如 wrapper-container.
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-container if you want.
从 .carousel img 中删除:
margin-top: -200px;
接下来，您必须解决旋转木马下的文本向下移动这一事实:
Next, you have to fix the fact that the text under the carousel is moved way down:
将以下内容添加到 @media... #wrapper-container
top: 0;
从 @media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
以及以下来自 @media (max-width: 767px)
.carousel img {
height: 300px;
}
因为旋转木马远不及智能手机尺寸的高度.
because the carousel is nowhere near that height at smartphone sizes.
您还必须在@media CSS 中调整标题文本的位置.您可能想要决定在轮播缩小时丢失一些标题文本.
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.
这会让你开始，你可以从那里开始......
This will get you started, and you can go from there...
这篇关于Bootstrap 响应式轮播无法正确调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
