如何通過另一個替換CSS類，當我改變媒體

Question

我在CSS的使用新的，和我仍然在學習曲線

基本上，我想用的顯示部分當我選擇媒體print，而不是在所有其他媒體中的col-xs-9時，它是一流的col-xs-12。

在CSS中有沒有簡單的方法來做到這一點？

Answer 1

媒體查詢只能改變選擇器的規則從大小到大小，它不能改變你放入標記的選擇器。要在標記中更改類需要使用Javascript。

Answer 2

爲了與col-xs-12打印相匹配，或者類似地，添加一個新類col-xs-12-print並將其設置爲與col-xs- 9

Answer 3

使用Twitter的引導時，他們有類隱藏或顯示打印

.visible-print and .hidden-print 

http://getbootstrap.com/css/#responsive-utilities-print

Answer 4

某些元素的CSS您不能更改類 -

一個不涉及JavaScript的可行的解決方法是創建第三個類print，並將css規則從col-xs-12複製+粘貼到它 - 將這個新類添加到所有屬於col-xs-9的東西中要顯示爲COL-XS-12 media print， 最後，讓事情變得光滑，把任何你需要的款式和你的新.print風格融於一個單獨的.css文件，並在頭部鏈接它：

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

（或者，如果它不是在該點一個巨大的文件，@media only print{}是可接受的）

或者，如果您不使用col-9類，則可以在@media部分中交換其類名。

或者，如果你認爲合適的JavaScript的解決方案，您可以添加一個「打印」按鈕，您的網頁，會做類似

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

Answer 5

使用引導程序內置類，你可以使用jQuery ，純javascript或@media查詢。如果你使用的是Less或者你可以使用mixins。既然你提到你是CSS的新手，我會假設它是普通的舊CSS。

你提到你想要col-xs-12和col-xs-9。您也可以將大小鏈接在一起。例如。 class="col-xs-12 col-lg-9"等。

正如你可以有以下的。可見，打印和.hidden印刷類注意到...

<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>