printing - form - Imprimir página con bootstrap 3
padding bootstrap 3 (6)
He estado buscando muchas respuestas aquí en stackoverflow que cubren parcialmente lo que me pregunto, pero no he encontrado nada que me funcione.
Entiendo que la página de impresión es de aproximadamente 550 px para A4 y, por lo tanto, bootstrap utilizará los estilos y el diseño que generalmente se usan para dispositivos móviles.
Cuando uso Ctrl + P para mi página web, la página imprimible se parece a la versión móvil de mi página. ¿Pero cómo hago que se vea como la versión de escritorio? (medios> 1024 px) ¿Hay alguna manera de hacer esto?
Sé que puedo cambiar el CSS específicamente para imprimir. ¿Pero cómo resolver esto con el sistema de grilla bootstrap 3? El ancho en mis divs se basa en lo que he agregado para col-xs, pero quiero imprimir para usar el diseño (ancho) para col-md
Editar: Después de haber estado luchando con esto durante unas horas más, me doy cuenta de que podría ser más complejo de lo que esperaba. Simplemente cambiar el ancho no me lo soluciona. Muchos de mis divs tienen la sintaxis de
<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>
o
<div class="col-md-4 col-sm-6 col-xs-12"></div>
La página se ve bien en XS para dispositivos pequeños, pero la impresión en XS hace que muchos elementos se vean gigantescos. Entonces la pregunta permanece. ¿Hay alguna manera de hacer que la página de impresión se vea igual que la disposición de los dispositivos medianos o grandes? ¿O tengo que hacer el css de impresión sin usar el sistema de rejilla de arranque y agregar anchos estáticos en pt para que todos los elementos lo logren?
Gracias por adelantado
Agregue este estilo css en su archivo print.css
@page {
size: A4;
margin: 40px;
}
@media print {
html,
body {
width: 210mm;
height: 297mm;
}
@-moz-document url-prefix() {}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.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-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
En realidad, todo lo que necesita agregar (a user.css) es este:
@media print {
@page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
}
Mientras lo hace, considere usar todas estas configuraciones para bootstrap 3
@media print {
@page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
Para aquellos que usan bootstrap mixins para crear columnas como esta (versión sass):
@include make-sm-column(3, 0);
no será suficiente sobrescribir los estilos para columnas como sugiere Christina. La única solución simple que encontré fue cambiar $ screen-sm en _variables.scss a 595px y recompilar bootstrap.css
Por lo tanto, encuentre este código en _variables.scss:
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
y cámbialo a esto:
// decrease min-width to fix print layout issue
$screen-sm: 595px !default;
$screen-sm-min: $screen-sm !default;
luego en tu _print.scss
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 768px;
}
body {
margin: 0 auto;
}
// .. your custom styles for print layout
}
Sería útil proporcionar un JSBin. De todos modos, dado que tenía este diseño en JSBin con col-sm- (asterisco), puedes simplemente cambiar todo el -sm- a -xs- entre la consulta de medios impresos. Todos los porcentajes son los mismos en cada punto de interrupción, por lo que al cambiar sm a xs se imprimirá eso e ignorará las otras clases de col- (asterisco). Ahh, leí la publicación ahora, ¡necesitarás cambiar todo el col-sm para col-md en esto y luego usar! Importante, eso debería hacerlo. Los xs col están fuera de las consultas de medios, por eso es que esto está sucediendo.
@media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
}
Terminé resolviendo el problema usando un archivo propio print.css sin todas las cosas de arranque receptivas incluidas. Solo se incluyen algunas de las cosas de arranque necesarias con show y hide.
Tuve el problema similar. Terminé reemplazando todo col-md- * con col-xs- * y funcionó como un amuleto. Aquí está el código de exmaple
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-md-9 text-center main-title col-md-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
convertido a
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>