Question

我正在尝试使用Twitter Bootstrap布局可用于打印的网站模板。我目前的代码看起来像这样

<!DOCTYPE html>
<html>

<head>
    <title>Loan</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body>

    <div class="container">
        <header>
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-3">
                        <div style="text-align: left;">
                            <img src="logo-small.png" style="margin-top: 23px;">
                        </div>
                    </div>
                    <div class="col-sm-6 text-center">
                        <h4>Kingdom of Cambodia <br>Nation Religion King</h4>
                        <div style="text-align: center;"><img src="lineheader.png" /></div>
                    </div>
                    <div class="col-sm-3">
                        <div style="margin-left: -30px; margin-top: 95px; text-align:right;">Contract number÷ 123456789</div>
                    </div>
                </div>
                <!-- end row -->
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h4>Letter Approval</h4>
                    </div>
                </div>
            </div>
            <!-- end col-sm-12 -->
            <div style="clear: both; height: 0px;"></div>
            <div class=""></div>
        </header>
        <section>
            <div class="col-sm-12">
                <p>
                    &nbsp;&nbsp;&nbsp; Microfinance Institution Plc. Has fulfilled the following terms and conditions: ÷
                    <p>
                        Khchei name John Michael Gender Male Nationality Cambodian, Cambodian identification number 123456789 and khchei Michael Alla Gender Female Cambodian Cambodian citizenship identification number 0938475626512 , address, current No. 12Eo, Str. 128, Sangkat Beoung Kang Kong II, Phnom Penh
                    </p>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Phone Number::
                        </div>
                        <div class="col-sm-5">
                            <b>012 9999 2222</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Approval loan amount:
                        </div>
                        <div class="col-sm-5">
                            <b>12,000.00 USD</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            For the duration:
                        </div>
                        <div class="col-sm-5">
                            <b>36 months</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            For use in order:
                        </div>
                        <div class="col-sm-5">
                            <b>Home Loan</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Interest rate per month:
                        </div>
                        <div class="col-sm-5">
                            <b>1.6% %</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Monthly Payment:
                        </div>
                        <div class="col-sm-5">
                            <b>300.00 USD</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Reward:
                        </div>
                        <div class="col-sm-5">
                            <b>123.345$</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-1">
                            Assurances:
                        </div>
                        <div class="col-sm-5">
                            <b>Hard title</b>
                        </div>
                    </div>
                    <p>
                        &nbsp;&nbsp;&nbsp;Microfinance Plc reserves the right to amend or terminate this loan at any time if an institution receives information that may cause it to be affected by the basis of which the loan is approved.
                    </p>
            </div>
        </section>
    </div>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>

浏览器看起来很好，但是当我在A4纸上打印预览或打印时，它的布局与浏览器不同。

在浏览器上它看起来像这样：

当我打印预览或打印A4纸时，它看起来非常不同：

我不知道出了什么问题。也许我错过了一种风格？

Answer 1

Bootstrap是＆＃34;移动优先＆＃34;。这意味着当某些东西不受支持时，它默认为移动布局。我有一种感觉，当你正在尝试打印时会发生这种情况。如果您将列类更改为col-xs-2而不是col-sm-2，则应该告诉浏览器将其呈现为2列范围，即使在移动上也是如此。这应该意味着它将在打印时默认为此。使用sm代替xs您在小屏幕上而不是最小（移动）屏幕上使用时，请使用2列跨度，否则默认情况下会占用整个宽度。

基本上，它打印移动视图，因此您需要更改移动设备＆＃34;布局。你可以读一下它here。

旁注： 如果你想在支持打印的同时保持移动布局，我唯一想到的就是在你自己的自定义css文件中添加一个@media print{...部分并手动完成，但这有点多了我想。或者，您可以将其sm媒体查询中的引导程序复制到其中并从那里开始。

在纸上打印时，Twitter Bootstrap无法正确呈现布局

1 个答案: