时间戳

首页 > 解决方案 > Bootstrap4如何在调整大小时隐藏外部div时显示内部div？

bootstrap-4 - Bootstrap4如何在调整大小时隐藏外部div时显示内部div？

问题描述

我有一张卡片里面的图表。在小屏幕或 xs 屏幕上查看时，我希望隐藏卡片但仍继续显示图表。我可以使用“d-none d-sm-block”通过引导程序轻松隐藏卡片，但它也会使图表消失。我希望我可以通过在图表 div 中放置“d-block”来简单地覆盖外部 div 命令，但它似乎并不那么简单。

那么有人知道我如何继续显示内部图表 div，同时将外部卡片 div 隐藏在较小的屏幕上吗？我创建了一个非常简单的jsfiddle，您可以调整它的大小以查看发生了什么。

<div class="container">
  <div class="row">
    <div class="card card-cascade wider reverse d-none d-sm-block" style="background-color: lightsteelblue">
      <div class="view view-cascade overlay">
        <div class="row justify-content-center d-block mt-3">
          <div class="col d-inline">
            1 of 2
          </div>
          <div class="col d-inline">
            2 of 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： bootstrap-4

解决方案

我认为媒体查询可以帮助你。

看看这里的jsfiddle代码

.card{
   background-color: lightsteelblue
}
@media (max-width: 400px) { 
    .card{
        background-color: transparent;
    }
}

推荐阅读