1

我正在使用 Bootstrap，我的导航栏下有一个轮播。

它在普通计算机上工作正常，请查看此链接。

但是，我在较小的屏幕上遇到了问题，例如 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;
  }

}
4

2 回答 2

2

你需要做很多事情来清理它......以下将帮助你开始，但肯定会有更多的调整要做。

根据您的最后一个请求，我没有查看 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 中调整标题文本的位置。当轮播缩小时，您可能想决定丢失一些标题文本。

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

于 2013-02-13T00:10:12.867 回答
0

首先，去掉 margin-top: -200px; 在您的 .corousel img 样式上。对于小屏幕，您的图像高度小于 200 像素，这会导致它离开屏幕。

于 2013-02-12T21:27:41.570 回答