Bootstrap4在调整大小时隐藏外部Div时如何显示内部Div？

Question

我在卡内有一张图表。在小屏幕或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>

Answer 1

我认为媒体查询可以为您提供帮助。

查看jsfiddle代码here

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