时间戳

首页 > 解决方案 > 仅在更大的屏幕上使用 CSS Bootstrap 类（卡片）

css - 仅在更大的屏幕上使用 CSS Bootstrap 类（卡片）

问题描述

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

我想我可能会使用媒体查询等，但这些不是我的类，而是 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>

标签： cssbootstrap-4

解决方案

基本上这张卡给你填充和边框。padding Spacing 实用程序具有响应性，因此可以根据需要轻松调整 Card 填充。例如，3 个填充单元打开lg和向上，0 个填充单元小于lg...

p-lg-3 p-0

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

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

Note-xs在 Bootstrap 4 中不再使用。

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

推荐阅读