Javascript 当我选择打印时，页面被弄乱了。如何保持相同的格式？

我用一些简单的css和html代码创建了一个简单的用户友好打印页面。 这就是它的样子

实际页面的屏幕截图

问题是，当我按CTRL+p打印当前页面时，预览混乱不堪，如下所示

我的问题是，当有人想要打印页面时，如何保持我创建的php文件的格式

这是我使用的CSS：

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"> 
<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

打印预览页面的屏幕截图

---

在CSS中，您应该制定新的打印规则：

@media screen {
    /* screen rules */
}
@media print {
  /* print rules */
}
@media screen,print {
    /* global rules */
}

如果您希望将所有这些规则抽象到一个唯一的文件中，类似这样的操作将起作用：

<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css"  media="print" />
<link rel="stylesheet" href="global.css" media="all" />

您是包括所有媒体类型的所有样式表，还是仅包括屏幕？@Sevensacat我所做的是

@Karoumpas如果您只是将它们编辑到问题中，您的链接更容易看到-我冒昧地为您这么做了。@TiesonT。谢谢你，让我清醒一下。。在我的print.php中有几个样式表，我在其中设置了

media=“screen”

。我不知道如何处理这个新的独特文件，在打印中包括什么rules@Karoumpas这是一个很好的起点：