Naprawdę mam problem z poprawnym wydrukowaniem moich widoków na Bootstrap i zastanawiałem się, czy ktoś może wskazać mi właściwy kierunek. Dodałem niestandardowy „print.css”, który zastępuje niektóre z oryginalnych stylów bootstrap, a także stylizuje niektóre z moich własnych komponentów.

To jest moje okno dialogowe drukowania:

Nie jestem pewien, czy tak łatwo można rozpoznać na obrazie, ale studnia straciła tło i nie obejmuje całej szerokości strony. Poza tym „kolumny” lub „przęsła” wydają się być nieporadne. Strona jest zbudowana w następujący sposób: (Pokazuje tylko pierwszy wiersz, aby utrzymać ją w czystości)

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

Oto mój 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;
    }
}