如何使用Asp.net捆绑在打印页面上使用引导程序样式

Question

我正在尝试在打印页面上使用bootstraps行/列网格，但是当我进入打印预览时，所有行和列都丢失了。我引用了this解决方案并正确显示了我的html中的链接标记：

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" media="all">

仍然显示在屏幕上：

这在打印预览中显示：

如何让我的引导样式显示在打印预览和打印页面上？

Answer 1

根据this，Bootstrap 3认为纸质页面宽度小于768px，因此它显示页面的移动版本。您应该为打印视图创建一个特殊的打印样式表。

或者，您应该可以通过向网格添加xs类来解决这个问题，例如：

<div class="row">
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>First Name</h1>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>Middle Initial</h1>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>Last Name</h1>
    </div>
</div>
<div class="row">
    <!-- Next row -->
</div>

这不是一个好主意，因为打印视图与小视口不同，因此最好创建一个单独的打印样式表。