用于打印的 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>

HTML CSS 推特引导

4赞 Gordon Copestake 3/5/2014

这个问题 stackoverflow.com/questions/320357/ 指出（A4）的打印视口是670px，这就是我的问题所在。我的打印页面和我的移动样式之间存在冲突，因为它们都具有相似的视口大小。

答：

7赞 Dwza 3/5/2014 #1

您的开关样式如下所示

<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>

#grid 响应式重置

编辑： 04/2019

从 Bootstrap 4.x 开始，有一些新的类可用于设置打印时的显示行为。请参阅 4.3 文档

0赞 Gordon Copestake 3/5/2014

是的，但我的印刷版总是使用 XS 风格，这让我的手机风格更加出色

0赞 Dwza 3/5/2014

但是在你的帖子中，你有两行不同的网格，但如果你想让它有响应性，你必须为该行提供你需要的所有类型:)

0赞 Gordon Copestake 3/5/2014

也许我举了一个不好的例子。我试图确保我的打印页面使用与移动版本不同的样式。两者似乎都想使用 col-xs-# 版本

1赞 Gordon Copestake 3/5/2014

这不是问题所在。让我试着解释一下：如果我有两列并排打印，我希望它们并排打印，但在移动设备上堆叠显示。我可以使用 col-xs-6 强制打印两列，但这也会强制它们在移动设备中并排，这意味着它们重叠。如果我用 col-xs-12 强制将它们堆叠在移动设备上，即使有足够的空间将它们并排放置，它们也会堆叠打印。col-sm-* 不起作用，因为视口太小而无法生效。

0赞 Gordon Copestake 3/5/2014

我测试过的每个人，Firefox、Chrome、IE11

1赞 Edgar 9/19/2014 #2

也许你可以使用 Bootstrap 2。如果您熟悉 Bootstrap 2，那么您可以将其用作替代方案，因为它提供了非响应式 CSS。Bootstrap 2 不是首先移动的，您必须添加额外的样式表才能使您的网页具有响应性。

或者，您可以为移动部件添加清除修复。查看 http://getbootstrap.com/css/#grid-responsive-resets

1赞 Gordon Copestake 9/19/2014

虽然 BS2 可能是一个解决方案，但我宁愿向前看，也不愿向后看

3赞 firepol 10/6/2014 #3

我有一个类似的问题，对我来说，最简单的解决方案是手动修改我希望在打印时以不同方式显示的元素的宽度（我添加了一个特定的类 - 在我的情况下：title-container，details-container，沿着col-xs-6等）。

例如：

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
            Some stuff
            </div>

            <div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
            Some more stuff
            </div>
        </div>
    </div>
</div>

@media print {
    .title-container {
        width: 360px;
        float: left;
    }

    .details-container {
        width: 300px;
        float: right;
    }
}

就我而言，我需要在右边浮动一列，在左边浮动一列，因此浮动...... 您也可以在自定义 css 中为 .col-xs-6 等设置宽度，这只是一个快速而肮脏的解决方案，但是为我需要这个的页面做了工作......

0赞 Gordon Copestake 10/6/2014

我见过的最好的解决方案，虽然仍然不理想！

0赞 Robbie Smith 11/7/2016

是的，我只是做了类似的事情。我知道这很黑客，但我有一个 col-xs-2 / col-xs-10 的东西。我在@media打印 { .hide_element_for_print { display：none } 中创建了一个类，并在需要时使用（如 col-xs-2）并更改了 .col-xs-10 { width：100% } 的定义。这使我能够隐藏左侧导航并打印主要内容区域的整个页面宽度。

85赞 Fredy31 1/26/2015 #4

我所做的是在我的打印 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

它仍然需要一些工作，但那个快速补丁对我帮助很大。

2赞 Jason Roman 11/9/2019

我还必须使用您的解决方案将其设置为与 Bootstrap 4 中的相同。max-widthwidth

0赞 tRuEsAtM 7/9/2022

如何在 Material UI 中使用它？

28赞 Alessandro Benoit 9/14/2015 #5

Fredy31 解决方案的 Sass 版本：

@for $i from 1 through 12 {
    .col-print-#{$i} {
        width: #{percentage(round($i*8.33)/100)};
        float: left;
    }
}

0赞 MFrazier 1/5/2018

正是我想要的！

0赞 Muhammad Waqas Aziz 7/27/2018

如何使用它。.

2赞 kspearrin 1/17/2016 #6

以下方法非常适合创建特定于印刷媒体的网格元素。使用 Bootstrap 3。

@media print {
    .make-grid(print);
}

然后，您可以将所有网格 col 元素与关键字一起使用。例如：等。printcol-print-6col-print-offset-2

54赞 Ehsan Abidi 4/2/2016 #7

如果您想要 Bootstrap 的网格，请不要使用 col-xs（移动设置）打印，并希望使用 col-sm-??取而代之的是，基于 Fredy31 的答案，你甚至不需要定义 col-print-??.只需重写所有 col-md-??里面的CSS类定义： @media print { /* copy and paste from 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%;
   }
}

0赞 eduardo92 5/12/2018

嗨，您究竟在哪里添加此@media打印数据。在 print.css 样式表中？

0赞 Ehsan Abidi 5/12/2018

嗨，在我的自定义 css 文件中，它有我自己的各种页面设置。

1赞 William Schroeder McKinley 8/8/2017 #8

以及 Ehsan Abidi 的答案的 SASS 版本，使用了 MiCc83 的答案：

  @for $i from 1 through 12 {
      .col-sm-#{$i} {
          width: #{percentage(round($i*8.33)/100)};
          float: left;
      }
  }

我更喜欢这个，因为我总是指定“sm”大小，并且它最接近我的应用程序中的打印页面。然后，我只需要在遇到异常值条件时添加一些专门用于打印的内容。

0赞 seflix 10/8/2018 #9

如果你只有 2 列，你可以尝试一下。我用下面的代码修复了它。

<div class="row">
    <div class="w-50 p-3 float-left">            
    </div>
    <div class="w-50 p-3 float-right">
    </div>
</div>

12赞 Rui Caramalho 1/15/2019 #10

对于 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);
                }
            }
        }
    }
}

将创建


@media print {
  .col-print-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; } }

@media print {
  .col-print-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; } }

@media print {
  .col-print-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

@media print {
  .col-print-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

@media print {
  .col-print-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; } }

@media print {
  .col-print-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

@media print {
  .col-print-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; } }

@media print {
  .col-print-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

@media print {
  .col-print-9 {
    flex: 0 0 75%;
    max-width: 75%; } }

@media print {
  .col-print-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; } }

@media print {
  .col-print-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; } }

@media print {
  .col-print-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

5赞 Ganesh Koilada 4/19/2020 #11

而不是使用新的列名（如 .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%;
  }
}

因此，通过这种方式，我们可以直接应用打印css样式，而无需更改列名。

0赞 Cobysan 4/9/2023

这对我有用，不必像 Fredy31 的解决方案那样显式添加 col-print。我认为这是最好的答案。清洁干燥。

0赞 Rusca8 1/9/2021 #12

如果它只是两列中的一行文本，您可以在此处使用可接受的答案。

1赞 Daniel Iftimie 12/19/2021 #13

对于 Bootstrap 4 sass，以下是我在多个项目中应用的一些片段。这些正在对以下方面进行调整：

网格（遵循 LG 断点）
垫片（重写LG边距/填充下方的所有内容）
按钮（由于背景色在打印预览中不起作用，因此将填充按钮切换为轮廓）
显示（重写LG显示器下方的所有显示器）
文本对齐方式（重写 LG 断点下方的所有内容）

    @media print {

    $grid-breakpoints-print: (lg: 992px); // keep breakpoint that you would like to apply for print
    
    /* Rewrite margins, padding, display & alignment to keep the LG and not the mobile ones */
        @each $breakpoint in map-keys($grid-breakpoints-print) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints-print);
            
            // rewrite all displays for your print breakpoint
            @each $value in $displays {
                .d#{$infix}-#{$value} {
                    display: $value !important;

                    @each $v in $displays {
                        &.d-#{$v} {
                            display: $value !important;

                            &.d-print-none,
                            &.table__sort {
                                display: none !important;
                            }
                        }
                    }

                    &.d-print-none {
                        display: none !important;
                    }
                }
            }

            // rewrite all spacings for your print breakpoint
            @each $prop, $abbrev in (margin: m, padding: p) {
                @each $size, $length in $spacers {
                    .#{$abbrev}#{$infix}-#{$size} {
                        #{$prop}: $length !important;

                        @each $s, $l in $spacers {
                            &.#{$abbrev}-#{$s},
                            &.#{$abbrev}-auto {
                                #{$prop}: $length !important;
                            }
                        }
                    }

                    .#{$abbrev}t#{$infix}-#{$size},
                    .#{$abbrev}y#{$infix}-#{$size} {
                        #{$prop}-top: $length !important;

                        @each $s, $l in $spacers {
                            &.#{$abbrev}t-#{$s},
                            &.#{$abbrev}y-#{$s},
                            &.#{$abbrev}t-auto,
                            &.#{$abbrev}y-auto {
                                #{$prop}-top: $length !important;
                            }
                        }
                    }

                    .#{$abbrev}r#{$infix}-#{$size},
                    .#{$abbrev}x#{$infix}-#{$size} {
                        #{$prop}-right: $length !important;

                        @each $s, $l in $spacers {
                            &.#{$abbrev}r-#{$s},
                            &.#{$abbrev}x-#{$s},
                            &.#{$abbrev}r-auto,
                            &.#{$abbrev}x-auto {
                                #{$prop}-right: $length !important;
                            }
                        }
                    }

                    .#{$abbrev}b#{$infix}-#{$size},
                    .#{$abbrev}y#{$infix}-#{$size} {
                        #{$prop}-bottom: $length !important;

                        @each $s, $l in $spacers {
                            &.#{$abbrev}b-#{$s},
                            &.#{$abbrev}y-#{$s},
                            &.#{$abbrev}b-auto,
                            &.#{$abbrev}y-auto {
                                #{$prop}-bottom: $length !important;
                            }
                        }
                    }

                    .#{$abbrev}l#{$infix}-#{$size},
                    .#{$abbrev}x#{$infix}-#{$size} {
                        #{$prop}-left: $length !important;

                        @each $s, $l in $spacers {
                            &.#{$abbrev}l-#{$s},
                            &.#{$abbrev}x-#{$s},
                            &.#{$abbrev}l-auto,
                            &.#{$abbrev}x-auto {
                                #{$prop}-left: $length !important;
                            }
                        }
                    }
                }
            }

            // rewrite all text alignments for your print breakpoint
            .text#{$infix}-left {
                text-align: left !important;

                &.text-left,
                &.text-right,
                &.text-center {
                    text-align: left !important;
                }
            }

            .text#{$infix}-right {
                text-align: right !important;

                &.text-left,
                &.text-right,
                &.text-center {
                    text-align: right !important;
                }
            }

            .text#{$infix}-center {
                text-align: center !important;

                &.text-left,
                &.text-right,
                &.text-center {
                    text-align: center !important;
                }
            }
        }

        /* Rewrite grid to keep the LG and discard the mobile */
        @for $i from 1 through 12 {
            .col-lg-#{$i} {
                flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
                max-width: #{percentage(round($i*8.33)/100)} !important;

                @for $k from 1 through 12 {
                    &.col-xs-#{$k},
                    &.col-sm-#{$k},
                    &.col-md-#{$k},
                    &.col-#{$k} {
                        flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
                        max-width: #{percentage(round($i*8.33)/100)} !important;
                    }
                }
            }
        }
        
        /* Since the print will not fill background-colors you need to transform filled buttons into outline */
        @each $color, $value in $theme-colors {
            .btn-#{$color} {
                color: $value !important;
                background-color: $white !important;
            }
        }
    }

这是一个正在工作的小提琴。请记住，在小提琴示例中，只有@media打印 { ... } 很重要。变量从一开始就被复制到有一个工作的小提琴。

0赞 Christine Wilson 4/21/2022 #14

基于 Fredy31 的回答，使用 Bootstrap 的精确宽度并删除重复的浮点数。

[class^="col-print"] {float:left;}
.col-print-1 {width:8.33333333%;}
.col-print-2 {width:16.66666667%;}
.col-print-3 {width:25%;}
.col-print-4 {width:33.33333333%;}
.col-print-5 {width:41.66666667%;}
.col-print-6 {width:50%;}
.col-print-7 {width:58.33333333%;}
.col-print-8 {width:66.66666667%;}
.col-print-9 {width:75%;}
.col-print-10{width:83.33333333%;}
.col-print-11{width:91.66666667;}
.col-print-12{width:100%;}

上一个：如何在最新的jQuery UI中调用tabs（）中的预定义方法

下一个：c# / Linq 和，其中

用于打印的 Bootstrap 网格

Bootstrap grid for printing

评论

评论

评论

评论

评论

评论

评论

评论