Question

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

在普通计算机上运行正常，请检查this link。

然而，我在小屏幕上遇到麻烦，例如苹果手机。只需调整浏览器屏幕大小即可查看我的意思。

我认为可能没有必要使用响应式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;

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

从.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中使用标题文本的定位。当轮播收缩时，您可能想要决定丢失一些标题文本。

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

Answer 2

首先，摆脱边缘顶部：-200px;在你的.carousel img风格上。使用小屏幕时，图像高度小于200像素，这会导致它离开屏幕。

Bootstrap Responsive Carousel无法正确调整大小

2 个答案: