首页 文章

仅在较大的屏幕上使用CSS Bootstrap类（卡）

提问于
浏览 次
0

我在我的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>
css bootstrap-4

2 回答

  • 1

    基本上，卡片为您提供了灌木和边框 . 填充间距工具具有响应性，因此可以根据需要轻松调整卡填充 . 例如， lg 和更高的3个填充单元，0个填充单元小于 lg ...

    p-lg-3 p-0

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

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

    注意Bootstrap 4中不再使用 -xs .

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

    回复于
  • 1

    您可以尝试将特定类添加到 <div class=“card-body”> 并在媒体查询中添加新样式 .

    回复于

相关问题