logo标签列表

打印的Bootstrap网格系统

htmlcsstwitter-bootstrap
56

我希望设计一个报告页面，可根据移动设备的需求采用不同的布局。我正在使用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>
4
这个问题https://dev59.com/jHRC5IYBdhLWcg3wXPwC指出打印视口（A4纸张）的宽度为670像素，这也是我遇到问题的地方。我的打印页面和移动端样式存在冲突，因为它们共享相似的视口大小。 - Gordon Copestake
14个回答
85

我所做的是在我的打印样式表中手动重新创建那些列类。

.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
我还需要使用您的解决方案将“max-width”设置为与Bootstrap 4中的“width”相同。 - Jason Roman
如何将它与 Material UI 结合使用？ - tRuEsAtM
54

如果您不想在打印时使用col-xs（移动端设置）来显示Bootstrap的网格，并希望改用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%;
   }
}
你好，这个@media print数据应该放在哪里？是在print.css样式表中吗？ - eduardo92
嗨，在我的自定义 CSS 文件中，我有自己的设置适用于各种页面。 - Ehsan Abidi
28

Fredy31方案的Sass版本：

@for $i from 1 through 12 {
    .col-print-#{$i} {
        width: #{percentage(round($i*8.33)/100)};
        float: left;
    }
}
正是我所寻找的！ - MFrazier
如何使用它。 - Muhammad Waqas Aziz
12

针对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%; } }
7
您可以像这样切换样式：
<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，您可能需要使用clearfix

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>

#grid-responsive-resets

编辑：2019年04月

自Bootstrap 4.x以来，有新的类可用于设置打印时的显示行为。请参见4.3文档

是的，但我的打印版本总是使用xs样式，这会破坏我的移动样式。 - Gordon Copestake
但是在您的帖子中，您有两行具有不同网格，但如果您想要它响应式，则必须为该行提供所需的所有类型 :) - Dwza
也许我举的例子不太好。我想确保我的打印页面与移动版本使用不同的样式。两者似乎都想使用col-xs-＃版本。 - Gordon Copestake
1
这不是问题所在。让我试着解释一下：如果我有两列并排，我希望它们能够并排打印，但在移动设备上则应该显示为堆叠的形式。我可以通过col-xs-6强制在打印时使用两列，但这也会导致它们在移动设备上并排重叠。如果我通过col-xs-12强制在移动设备上堆叠它们，即使有足够的空间让它们并排，它们也会被打印成堆叠的形式。由于视口太小，col-sm-*没有效果。 - Gordon Copestake
我测试过的所有浏览器，包括Firefox、Chrome和IE11。 - Gordon Copestake
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%;
  }
}

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

这对我有用，而且不必像Fredy31的解决方案那样显式添加col-print。我认为这是最好的答案。简洁明了。 - Cobysan
3

我曾遇到类似的问题，对我来说最简单的解决办法是手动修改要在打印时显示不同的元素的宽度（我为这些元素添加了特定的类名-在我的情况下是：标题容器，详细信息容器等，以及 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设置宽度等。这只是一个快速而简单的解决方案，但对于我需要的页面起到了作用...
我见过的最好的解决方案，尽管仍不是理想的！ - Gordon Copestake
是的，我刚刚做了类似的事情。我知道这很hackish，但我使用了col-xs-2 / col-xs-10。我在@media print中创建了一个类.hide_element_for_print { display:none }，并在需要时使用它（例如col-xs-2），并更改了.col-xs-10的定义{ width:100% }。这使我能够隐藏左侧导航栏并打印主内容区域全页宽度。 - Robbie Smith
2
以下内容可以很好地创建适用于打印媒体的网格元素。使用Bootstrap 3。
@media print {
    .make-grid(print);
}

然后，您可以使用所有带有 print 关键字的网格列元素。例如：col-print-6，col-print-offset-2 等。

1

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

这里是一个可工作的Fiddle。请注意，只有@media print { ... } 在fiddle示例中起作用。为了使fiddle正常工作，从开头复制了变量。

1
也许你可以使用Bootstrap 2。如果你熟悉Bootstrap 2，那么你可以将其作为另一种选择，因为它提供了非响应式CSS。Bootstrap 2不是移动优先的，你需要添加额外的样式表来使你的网页具有响应性。
或者你可以为移动端添加clearfixes。请参见http://getbootstrap.com/css/#grid-responsive-resets。
1
虽然BS2可能是一个解决方案，但我宁愿向前看，而不是回头。 - Gordon Copestake
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接