css - How can I manage classes like "row" and "span(X)" of Twitter Bootstrap to work on @media print? -


i need print web pages in website , i'm wondering how make row , spanx classes of bootstrap work can manage content of printed page.

for example:

<div class="row-fluid">
<div class="span12">
<strong>some stuff</strong>
</div>
</div>

and

<div class="row-fluid">
<div class="span6 offset6">
<strong>some stuff</strong>
</div>
</div>

look same when calling window.print().

in example above, <strong>some stuff</strong> not being pushed ahead offset6.

i've done 2 things:

  • taken @media print code bootstrap.css , bootstrapresponsive.css;

  • changed media all:
    <link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="screen" />

    to <link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="all" />;

with these changes, header, footer , bootstrap (original) font have appeared on printed page still no effect from/of classes.

thanks.

did make separate stylesheet , place after other stylesheets ,

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

anything put in there override other styles have in media="screen" stylesheets. make sure last css file called in dom.

i forget if have include @media print in print style sheet, think media="print" take care of that


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -