如何显示div的内容,使其在8.5 x 11的纸张上准确显示?

我有一个使用CSS的项目 Twitter-bootstrap 3.3 来设计我的应用程序。

我的页面上有一个部分需要用标准的8.5 x 11纸张打印。然而,我想要可打印的 div 在屏幕上准确显示它在纸张上的打印方式。

这是我的理解,我需要补充 .visible-print-block 类,使其内容可打印。但是,我喜欢以适当的宽度显示可打印内容,这样可打印版本看起来就像浏览器上的可见版本。还有 .可见打印块 类在浏览器中隐藏分隔符,但我想在浏览器上以及打印时显示分隔符。

这是我的HTML代码

<div class="panel panel-default">

    <div class="panel-header clearfix">
        <div class="pull-right">
            <button id="print" class="btn btn-primary" role="button" data-target-print="#print_section_en">
                <span class="glyphicon glyphicon-print" /> Print Letter
            </button>
        </div>
    </div>

    <div class="panel-body">
        <div class="well visible-print-block" id="print_section_en">
            <p>Some <strong>printable</strong> content goes here...</p>
            <p>Second paragraph...</p>
            <div class="row">
                <div class="col-md-6">
                    <dl class="dl-horizontal">
                        <dt>Name</dt>
                        <dd>Fullname</dd>
                    </dl>
                </div>

                <div class="col-md-6">
                    <dl class="dl-horizontal">
                        <dt>Date</dt>
                        <dd>Todays's date</dd>
                    </dl>
                </div>
            </div>
            <p>Third paragraph...</p>
        </div>
    </div>

</div>

这是我触发打印的JS代码。

<script>
$(function(){
    $('#print').click(function(){
        window.print();
    });
});
</script>

“print_section_en”分隔符的内容是我希望使其可打印的内容,同时使其在浏览器上可见,与纸张上的外观相同或非常相似。