web-dev-qa-db-fra.com

Imprimer correctement Twitter Bootstrap

J'ai vraiment du mal à imprimer correctement mes vues Twitter Bootstrap), et je me demandais si quelqu'un pouvait me diriger dans la bonne direction. J'ai ajouté un "print.css" personnalisé qui remplace certains le style original bootstrap), ainsi que le style de certains de mes propres composants.

Ceci est mon dialogue d'impression: enter image description here

Vous ne savez pas si vous pouvez distinguer si facilement de l'image, mais le puits a perdu son arrière-plan et ne s'étend pas sur toute la largeur de la page. En outre, les "colonnes" ou les "étendues" semblent être toutes confondues. La page est construite comme ceci: (Afficher seulement la première ligne pour la garder propre)

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="row-fluid">
                <div style="height: 150px; width: 300px">
                    <img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' />
                </div>
            </div>

            <div class="row-fluid">
                ...
            </div>

        </div>
        <div class="span4">
            ...Pie chart control
        </div>
        <div class="span5">
            ...Bar chart control
        </div>

    </div>
</div>

Voici mon print.css:

@media print {
    body {
        margin: 0;
        padding: 0;
        line-height: 1.4em;
        Word-spacing: 1px;
        letter-spacing: 0.2px;
        font: 13px Arial, Helvetica,"Lucida Grande", serif;
        color: #000;
    }

    #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
        display: none;
    }

    #print-btn, #update-btn, #units {
        display: none;
    }

    #nav-left {
        display: none;
    }

    #report-container {
        visibility: visible;
    }

    .well .span12{
        width: 100%;
        visibility: visible;
    }

    .navbar {
        display: none;
    }

    .sidebar-nav {
        display: none;
    }
}
htmlcsstwitter-bootstrapprinting
30
Nicklas Pouey-Winger

Tout d'abord Bootstrap.css est livré avec styles d'impression prédéfinis tels que:

/** 
 *  Use these for toggling content for print.
**/
.visible-print {
    display: block !important;
}

.hidden-print {
    display: none !important;
}

Deuxièmement , vous pouvez tester avec règle css de saut de page pour séparer les graphiques sur des pages différentes pour une mise en forme plus propre.

/** 
 *  Page-break-inside seems to
 *  be required for Chrome.
**/
div.somechart { 
   page-break-after: always; 
   page-break-inside: avoid;
}

Troisième test avec formatage avec les lignes pour occuper le largeur totale sur l'écran d'impression plutôt que de compter sur les pourcentages de la span3/col-*-3'le sable span4/col-*-4 _, car il semblerait qu'ils se comportent correctement d'une manière ou d'une autre lorsque vous prenez en compte:

  • Sytem impression des marges de page
  • Marges définies par @print de Bootstrap
  • Gouttières
  • pourcentages de portée à l'écran d'impression.

Enfin le dernier petit chose qu'il est utile de noter (Oui, malgré la coutume @print style!):

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="screen" />

à:

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />
62
MackieeE