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
codebootstrap.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
Post a Comment