html - Bootstrap Responsive Carousel 无法正确调整大小

Question

我正在使用 Bootstrap，我的导航栏下有一个旋转木马。

它在普通计算机上工作正常，检查 this link .

但是，我在较小的屏幕上遇到了麻烦，例如iPhone。只需调整浏览器屏幕大小即可了解我的意思。

我想也许响应式 CSS 不是必需的，但我做错了其他事情。也许他们是在每个屏幕上调整大小的轮播图像的更好方法。

此外，我希望轮播有 100% 的屏幕高度，这样轮播会横跨整个屏幕，其余内容只有在滚动时才会显示。

我正在使用的 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;
  }

}

Answer 1

要清理它，您需要做很多事情...以下内容将帮助您入门，但肯定还有更多调整要做。

我没有按照您上次的要求查看 CSS 以用图像填充屏幕。我认为如果需要，您将不得不考虑添加一个不同的旋转木马和其他具有纵向纵横比的裁剪图像，以便显示您想要的图像的特定部分。

首先在@media (max-width: 767px)下，去掉:

  .navbar-inner {
    margin: -20px;
  }

这会导致顶部的菜单栏向上移到视线之外。

从@media....carousel，删除:

 margin-left: -20px;
 margin-right: -20px;

这很乱，是因为添加到正文的填充(见下文)。

将以下内容添加到 @media (max-width....carousel:

 position: relative;
 margin-top: 0px;

因为您希望旋转木马整齐地位于导航栏下方。

从 @media... body 中删除以下内容

 padding-right: 20px;
 padding-left: 20px;

这会导致轮播出现问题，如果需要，您可以为特定的 div 添加此填充，例如 wrapper-container。

从 .carousel img 中删除:

 margin-top: -200px;

接下来，您必须解决轮播下的文本向下移动的问题:

将以下内容添加到 @media... #wrapper-container

 top: 0;

从 @media (max-width: 979px) 中删除以下内容

.carousel .item {
    min-height: 500px;
}

以及来自 @media (max-width: 767px)

的以下内容

.carousel img {
    height: 300px;
}

因为在智能手机尺寸下，旋转木马远不及该高度。

您还必须尝试调整标题文本在@media CSS 中的位置。当轮播缩小时，您可能想决定丢失一些字幕文本。

这会让你开始，你可以从那里开始......