Question

我在Bootstrap中有轮播滑块，这是我的轮播字幕。

<div class="carousel-caption"> <p class="mx-auto text-center">Sed eros orci, faucibus at ex mollis, luctus fringilla erat. Etiam vel nibh velit. Nulla mattis tortor vel orci elementum consectetur sit amet ultrices metus. Donec ac arcu sed justo maximus fringilla vel eu nulla. In vel vestibulum metus. Maecenas et nisl eget ante mattis fermentum. </p> </div>

我希望文本的背景封面宽度为100％，但文本的大小为40％，并且当p中的大小更改轮播字幕的高度时，该文本按比例居中更改，并且文本在垂直和水平方向上居中。我有下一个CSS：

.carousel-caption {
  position: absolute;
  top: 50%;
  left:0;
  right:0;
  bottom: 0;
  transform: translateY(-32%);
  background: #000;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
  max-height: 30vh;       
 }
 p {
  width: 40%;
 }

预先感谢您的帮助。

Answer 1

之所以会发生这种情况，是因为某些标签p减小了轮播的尺寸，因为您声明了所有人的“ width：40％”，而不仅是轮播字幕中的那个。我建议更改此内容：

p { width: 40%; }

为此：

.carousel-caption p { width: 40%; }

另一个原因可能是屏幕的大小，因为您声明了“最大高度：30vh”，因此轮播字幕的高度为屏幕的30％

具有绝对位置的响应式轮播字幕-轮播滑块引导程序4

1 个答案: