How to print while maintaining page layout?

0

I am developing a basic hotel control system. When registering the guest entry in a suite, I need to print a "receipt" for the client, however placing only the window.print() JavaScript function is not printing as I would like. The image below shows how the layout of the page is and how the impression is coming out (right).

TheentirecontentsofthereceiptwithinadivcontainingotherDIVsinside,sinceIammountingthesystemwithBootstrapanditisnecessarytoinsertthedivstouseBootstrapgrids(responsivetables).Hereisthebasicstructureofdivinquestion:

<divid="recibo" class="container-fluid">
    <div class="row" style="background-color:#d7d8da;">
        <div class="col-md-12 text-center">Comprovante de Entrada em Suíte</div>
    </div>
    <div class="row" style="background-color: initial;">
        <div class="col-sm-12 text-center">
            <br>
        </div>
    </div>  
    <div class="row" style="background-color: initial;">
        <div class="col-sm-6 text-center">
            <b>Número da Suíte</b>
        </div>
        <div class="col-sm-6 text-center">
            <?php
                echo $num_suite;
            ?>
        </div>
     </div>
</div>

Is there any way you can print while preserving the whole layout of the page as it is on the left side of the image (HTML, CSS, etc.)?

    
asked by anonymous 21.05.2017 / 01:07

1 answer

1

To print the way you want, use "col-xs-6" instead of "col-sm-6" .

Bootstrap understands printing to be the equivalent of "xs" .

    
21.05.2017 / 01:16