Question

我想设计一个具有不同布局的报告页面，以便打印到移动设备。我正在使用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>

Answer 1

我所做的是在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来隐藏/显示仅在打印版本中的元素。

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

Answer 2

如果你想让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%;
   }
}

Answer 3

Fredy31解决方案的Sass版本：

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

Answer 4

您的开关样式如下

<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

编辑：04/2019

自Bootstrap 4.x以来，有一些新类可用于在打印时设置显示行为。的 SEE 4.3 Docs

Answer 5

我有一个类似的问题，对我来说最简单的解决方案是手动修改我希望在打印时显示不同的元素的宽度（我添加了一个特定的类 - 在我的情况下：title-container，details-container for those ，沿着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 等设置宽度，这只是一个快速而肮脏的解决方案，但是我需要这个页面的工作......

Answer 6

以下工作非常适合创建特定于打印介质的网格元素。使用Bootstrap 3。

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

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

Answer 7

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

或者您可以为移动部件添加明确修正。见http://getbootstrap.com/css/#grid-responsive-resets

Answer 8

使用MiCc83答案的SASS版Ehsan Abidi的回答：

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

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

Answer 9

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

Answer 10

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

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

Answer 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样式，而无需更改列名。

Answer 12

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

用于打印的Bootstrap网格

12 个答案: