Question

here's the site。如果您将窗口调整为较小的大小。您会注意到由

引起的底部边距/填充

.carousel-inner {
    background-color: #03324c;
}

我可以删除它，但指示器将不可见，并且底部将有一个空的间隙。我知道图像有不同的大小，我尝试调整大小，同样的问题。我已经尝试了很多东西2天，没有任何效果。

.carousel-inner {
    background-color: #03324c;
}
.carousel-inner img {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    opacity: 0.7;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    bottom: 0;
}
.carousel-caption h3 {
    color: #fff !important;
}

Answer 1

最好在background-image元素上使用background-size:cover与.item相结合。

例如，您的第一项将更改为此（只需删除img标记）：

<div class="item" style="min-height: 710px;">
  <div class="carousel-caption">
    <h3>New York</h3>
    <p>The atmosphere in New York is lorem ipsum.</p>
  </div>
</div>

相应的.item元素的样式将是：

.item {
  background-image: url(images/medium/quote.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}

Bootsrap轮播：去除底部边缘

1 个答案: