Question

我为我的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>

Answer 1

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

Answer 2

基本上，卡片会为您提供填充物和边框。填充Spacing实用程序具有响应能力，因此可以轻松根据需要调整Card填充。例如，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

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

2 个答案: