Html Bootstrap丢失版式打印肖像
我从一个网站上创建了一个看起来像是可用模板的东西,并愉快地开始使用它。当我打印信息时,我的打印机最初设置为横向,所以一切看起来都很好,我得到了一份漂亮的报告,整齐地集中在页面中央。下面是我生成的一个文件(我正在使用jinja2模板,但是如果我知道HTML/CSS有什么问题,我可以修复模板)Html Bootstrap丢失版式打印肖像,html,css,twitter-bootstrap,printing-web-page,Html,Css,Twitter Bootstrap,Printing Web Page,我从一个网站上创建了一个看起来像是可用模板的东西,并愉快地开始使用它。当我打印信息时,我的打印机最初设置为横向,所以一切看起来都很好,我得到了一份漂亮的报告,整齐地集中在页面中央。下面是我生成的一个文件(我正在使用jinja2模板,但是如果我知道HTML/CSS有什么问题,我可以修复模板) SPoE测试 下一代集成测试系统 2019-05-23 23:59:59时的单个PoE装置0000000 #0000000 通过 第一步 通过 权力 28.1 现在的 525 电压 53.7 @页面{s
SPoE测试
下一代集成测试系统
2019-05-23 23:59:59时的单个PoE装置0000000
#0000000
通过
第一步
通过
权力
28.1
现在的
525
电压
53.7
@页面{size:auto}
正如您所看到的,这张照片在风景中表现得很好:
不幸的是,当我试图以纵向方式打印时,输出结果就不那么令人信服了:
内联@page{size:auto}
是我在研究中添加的东西——在年被推荐使用,但遗憾的是,它似乎没有什么区别。有趣的是,虽然我发现了一些与无法在横向打印有关的问题,但似乎没有其他人发现肖像布局是一个问题
作为一名设计师,我是一名相当出色的砌砖工人,所以虽然软件对我来说根本没有问题,但我发现这些设计问题有时相当棘手。这里发生了什么,我如何修复它?您需要为打印媒体编写CSS 下面是一个基于您的代码的基本示例
@介质打印和打印(最大宽度:767px){
.行{
显示器:flex;
弯曲方向:行;
}
.col-md-3{
弹性基准:25%;
}
.col-md-1{
弹性基准:8.33%;
}
.col-md-8{
弹性基准:66.67%;
}
.col-md-6{
弹性基准:50%;
}
}
SPoE测试
下一代集成测试系统
2019-05-23 23:59:59时的单个PoE装置0000000
#0000000
通过
第一步
通过
权力
28.1
现在的
525
电压
53.7
@页面{size:auto}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4, from LayoutIt! -->
<title>SPoE Testing</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="page-header">
<h1>
Integrated Next-Generation Test System
</h1>
<hr>
</div>
</div>
<div class="col-md-3">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="page-header">
<h2>
Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
</h2>
<hr>
</div>
<div class="row">
<div class="col-md-4">
<h3>#0000000</h3>
</div>
<div class="col-md-8">
<h3>pass</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h5>Step 1</h5>
</div>
<div class="col-md-8">
<h5>pass</h5>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
power
</div>
<div class="col-md-8">
28.1
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
current
</div>
<div class="col-md-8">
525
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
voltage
</div>
<div class="col-md-8">
53.7
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<style type="text/css"> @page { size: auto } </style>
</body>
</html>