bootstrap4 carousel-caption 字幕被自动隐藏了

轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像、文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API(页面可见性)的浏览器中,当网页对用户不可见时(如浏览器选项卡处于非活动状态、窗口小化时),轮播效果控件会停止运动,从而节省性能。

注意1:请注意轮播上的图像引用了 .d-block 、 .w-100两个样式,以修正浏览器预设的图像对齐带来的影响。

注意2:将 .active 样式添加到其中一个幻灯片(一般第一张),否则轮播效果将无法正常运行(展现)。

注意3:加上 data-interval="" 到一个 .carousel-item 更改自动循环到下一项之间的延迟时间.

包含字幕的轮播

在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中,如果是输小的浏览器viewport上,会自动隐藏(隐藏文字呈现主图片轮播),引用的是.d-none定义,一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators">  <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>  <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>  <li data-target="#carouselExampleCaptions" data-slide-to="2"></li></ol><div class="carousel-inner">  <div class="carousel-item active" data-interval="10000">    <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">    <div class="carousel-caption d-none d-md-block">      <h5>First slide label</h5>      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>    </div>  </div>  <div class="carousel-item" data-interval="10000">    <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">    <div class="carousel-caption d-none d-md-block">      <h5>Second slide label</h5>      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>    </div>  </div>  <div class="carousel-item" data-interval="10000">    <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">    <div class="carousel-caption d-none d-md-block">      <h5>Third slide label</h5>      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>    </div>  </div></div><a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">  <span class="carousel-control-prev-icon" aria-hidden="true"></span>  <span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">  <span class="carousel-control-next-icon" aria-hidden="true"></span>  <span class="sr-only">Next</span></a>
  </div>
</div>

问题:

bootstrap4 carousel-caption 被自动隐藏了,就是PC端时可以看到大标题下面的描述用于,但是到手机端时,这些描述被自动隐藏了!

解决方案:

正如上文所提到的那样,是因为在bootstrap 4版本中自动引用了两个样式:.d-none.d-md-block样式,当PC端的时候使用.d-md-block,当手机端时使用 .d-none

所以如果您想手机端和PC端都显示文字,那么直接删除这两个判断样式即可!

参考链接:Bootstrap 4 轮播效果 _Bootstrap中文网 (getbootstrap.net)

滚动至顶部
扫描微信二维码联系我们 关闭