[英]Bootstrap 4 carousel captions disappear when resizing
Using Bootstrap 4. Essentially, I have a carousel that is cycling through a bunch of different project features (GIFs with captions).使用 Bootstrap 4。本质上,我有一个轮播,它在一系列不同的项目功能(带标题的 GIF)中循环。 I have the captions below it based on some code from elsewhere on SO.我根据 SO 上其他地方的一些代码在它下面有标题。
Works perfectly on medium/large screens but once I get too small, the captions just disappear altogether.在中/大屏幕上完美运行,但一旦我变得太小,字幕就会完全消失。 How can I keep the captions on smaller screens?如何将字幕保留在较小的屏幕上?
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block carousel-image" src = "assets/translate-trimmed.gif" alt = "GIF of Sketchy translating objects.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">Translate</h5>
<p class = "feature-detail">
Using the "Select Shape" option, user can move shapes around the canvas. Translation is controlled by dragging the mouse across the screen.
</p>
</div>
</div>
<div class = "carousel-item">
<img class = "d-block carousel-image" src = "assets/raise-lower-trimmed.gif" alt = "GIF of Sketchy raising/lowering layers.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">
Raise/Lower
</h5>
<p class = "feature-detail">
The "Raise" and "Lower" buttons can move shapes up or down in the list of layers. Layers are preserved even after saving/loading.
</p>
</div>
</div>
For CSS, I'm using the following relevant stuff:对于 CSS,我正在使用以下相关内容:
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
margin-bottom: 10px;
}
Any ideas? I can provide more code but the project is pretty long and I don't think anything else is messing with it.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.