如何在更换媒体时将一个CSS类替换为另一个

Question

我是使用CSS的新手，我还处于学习曲线阶段

基本上，当我选择媒体print而不是所有其他媒体中的col xs-9时，我希望显示一个使用类col-xs-12的部分。

在CSS中有没有一种简单的方法可以做到这一点？

Answer 1

您不能在CSS中更改类-

一种不涉及JavaScript的可行解决方法是创建第三个print类，并将copy+paste -xs-12中的css规则添加到其中--将这个新类添加到您希望在media print上显示为col-xs-12的所有col-xs-9中，最后，为了保持流畅，将您需要的任何样式和新的.print样式放入一个单独的.css文件中，并将其链接到头部：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

(或者，如果在这一点上它不是一个巨大的文件，@media only print{}是可以接受的)

或者，如果您不打算使用col9类，您可以在@media部分中交换它们的类名。

或者，如果您对javascript解决方案感到满意，可以在页面中添加一个"Print“按钮，如下所示

$("#printButton").click(function(){ 
     $(".col-xs-9").addClass("col-xs-12").removeClass("col-xs-9");
});

Answer 2

使用Bootstraps内置的类，你可以使用jQuery，普通的javascript或者@media查询。如果你使用的是Less或其他东西，你可以使用混入。既然你提到你是CSS的新手，我就假设它是普通的老式CSS。

您提到您想要col-xs-12和col-xs-9。您还可以将大小链接在一起。例如：class="col-xs-12 col-lg-9"等。

正如在.visible-print和.hidden-print类中所指出的，您可以拥有以下内容...

<div id="sectionContainer">
    <div class="col-xs-12 hidden-print">
        <!-- Add the content to see if your viewing on a web page -->
    </div>
    <div class="col-xs-9 visible-print">
        <!-- Content to show in print -->
    </div>
</div>

Answer 3

媒体查询只能从大小到大小改变选择器的规则，它不能改变你放入标记中的选择器。要更改标记中的类，需要使用Javascript。