Question

我想折叠列，以便在移动视图中查看它们时会堆叠，但我想在打印视图中完全忽略它。

所以，如果我有this：

<div class="row">
  <div class="col-md-6">
    These columns should be stacked in mobile view...
  </div>
  <div class="col-md-6">
    ...but not in print view.
  </div>
</div>

我希望它们只有在我有一个小屏幕时才会崩溃，但它不是打印视图。因此，打印视图的行为就好像col-md-6替换为col-xs-6。

使用col-xs-6之类的内容可以阻止它在打印视图中折叠，但当然它在屏幕视图中不会崩溃。
我想避免使用其中一个打印可见性类，因为我必须复制内容，而我只会更改div的类。
我尝试在未选中“响应式实用程序”的情况下获取Bootstrap版本，然后启用带有<link href="..." rel="stylesheet" media="print" />的非响应版本和media="screen"的响应式版本，但它仍然崩溃了两者。

如何仅在小的非打印视图中折叠列？

Answer 1

对不起，我的评论太简短了。您需要使用要使用的打印样式设置媒体查询。假设您希望md类在列中打印，请将其添加到自定义css文件中：

@media print {

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
    .col-md-12 {
        width: 100%;
    }
    .col-md-11 {
        width: 91.66666666666666%;
    }
    .col-md-10 {
        width: 83.33333333333334%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-8 {
        width: 66.66666666666666%;
    }
    .col-md-7 {
        width: 58.333333333333336%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-5 {
        width: 41.66666666666667%;
    }
    .col-md-4 {
        width: 33.33333333333333%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-2 {
        width: 16.666666666666664%;
    }
    .col-md-1 {
        width: 8.333333333333332%;
    }

}

在移动视图中折叠列，但不在打印视图中折叠

1 个答案: