Gor*_*ake 36 html css twitter-bootstrap
我想设计一个具有不同布局的报告页面,以便打印到移动设备.我正在使用bootstrap v3.似乎网格无法区分两者,因为打印断点与移动断点(xs)相同
例如:在下面的测试html中,我的打印页面(或打印预览)并排显示xs6列,但堆叠了sm6列.xs和sm之间没有断点.
当然我的打印页面比我的移动视口宽,所以不应该使用sm布局？
我做错了什么或是这样的？是否有定义的视口宽度用于打印？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
xs6
</div>
<div class="col-xs-6">
xs6
</div>
</div>
<div class="row">
<div class="col-sm-6">
sm6
</div>
<div class="col-sm-6">
sm6
</div>
</div>
</div>
</body>
</html>
Fre*_*y31 61
我所做的是在我的print css中手动重新创建那些列类.
.col-print-1 {width:8%; float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}
然后我只使用这些类,比如我使用bootstrap类来使我的列只用于打印.我还创建.visible-print并.hidden-print仅在打印版本中隐藏/显示元素.
它仍然需要一些工作,但这个快速补丁帮助了我很多.
Ehs*_*idi 38
如果你想让Bootstrap的网格不用col-xs(移动设置)打印,并且想要使用col-sm- ?? 相反,基于Fredy31答案,你甚至不需要定义col-print - ??.只需重写所有col-md- ?? 里面的css类定义:@media print {/*从bootstrap.css*/}复制并粘贴如下:
@media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
}
MiC*_*c83 22
Fredy31解决方案的Sass版本:
@for $i from 1 through 12 {
.col-print-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
您的开关样式是这样的
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
看到
＃grid-example-mixed或＃grid-example-mixed-complete
也许你需要清除
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
编辑：04/2019
从Bootstrap 4.x开始，有新的类可用于设置打印时的显示行为。请参阅4.3文档
对于Bootstrap 4（使用SASS）
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $i from 1 through $grid-columns {
@media print {
.col-print#{$infix}-#{$i} {
@include make-col($i, $grid-columns);
}
}
}
}
}
将创建
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $i from 1 through $grid-columns {
@media print {
.col-print#{$infix}-#{$i} {
@include make-col($i, $grid-columns);
}
}
}
}
}
小智 5
不要使用新的列名称（如 .col-print-1 、 .col-print-2 ）重新创建，而是编写一个在打印文档时启用的媒体查询。
@media print {
.col-md-1,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,
.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
float: left;
}
.col-md-1 {
width: 8%;
}
.col-md-2 {
width: 16%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 42%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58%;
}
.col-md-8 {
width: 66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83%;
}
.col-md-11 {
width: 92%;
}
.col-md-12 {
width: 100%;
}
}
这样我们就可以直接应用 print css 样式而无需更改列名。
| 归档时间： |
|
| 查看次数： |
62581 次 |
| 最近记录： |