css - 仅在大屏幕上使用 CSS Bootstrap 类(卡片)

Question

我为我的 Web 应用程序使用了 Bootstrap 4 模板，该模板在卡片定义中包含一个表单。我已经意识到，为了让它更适合移动设备(=更好地利用空间)，卡片容器可能会被拿走。我本来打算消除每种形式的卡片类，但后来我意识到为更大的屏幕保留这样的设置会很棒。

我想我可能会使用媒体查询等，但这些不是我的类(class)而是 Bootstrap 的我不确定在“某些情况下”如何隐藏它们。是否可以通过 css 做到这一点？谢谢!

当前模板:

     <div class="container-fluid">
     <div class="row">
         <div class="col-xs-12 col-lg-8">
              <div class="card mt-3">
                <div class="card-body">
                    <div class="card-title">
                    </div>
                     <!--- FORM DEFINITION -->
                </div>
              </div>
         </div>
     </div>
 </div>

Answer 1

基本上，卡片会为您提供填充和边框。 padding Spacing utils 是响应式的，因此很容易根据需要调整 Card padding。例如，lg 及以上为 3 个填充单元，lg 为 0 个填充单元...

p-lg-3 p-0

然后对边框使用简单的媒体查询...

@media (max-width:992px) {
    .card {
        border-width:0;
    }
}

注意 -xs 在 Bootstrap 4 中不再使用。

https://www.codeply.com/go/BIxuYmb266