Html Bootstrap 3-打印布局并在每个网格列后断开

如果您以这个示例为例（请在此处查看：）

专栏1
专栏2

当您对生成的页面进行打印预览时，似乎会导致列堆叠/断开（就好像删除了浮动），而不是在通常的网格布局中显示它们

我已经查看了bootstrap.css的

@media print

部分，我看不到任何与

div

相关的会导致这种情况发生的内容

---

有人知道如何避免这种情况吗？

Bojangles的评论让我找到了正确的方向，所以我将回答我自己的问题

---

使用“xs”大小的网格列，根据is for“Extra small devices Phone”（I）创建了一个单独的print.css并添加了以下内容：

@page {
    size: A3;
    margin-left: -5cm;
    margin-right: -5cm;
    }

---

Chrome可以很好地使用，但是负边距会扼杀IE。Firefox似乎不需要它。我对另一种方法感兴趣。

解决方案必须在元素上，而不是页面本身。你也不应该依赖col xs-…因为它们适用于小屏幕/设备

问题是页面本身的像素很小，所以bootstrap认为它需要应用xs样式

引导团队不会解决这个问题，它与

引导解决方案是隐晦地记录这种“古怪”行为

在我看来，应该有一个col print-…一组布局类，这样超小的布局类和print可以共存

我的临时解决办法如下：

@media print {
  [class*="col-sm-"] {
    float: left;
  }
}

---

您可以使用col print，在我们的例子中，我们使用的是sm，而不是xs，因为我们希望xs阻止布局，这就是为什么使用这些类进行打印不起作用的原因。

基于Gerard解决方案，您可以像这样使用bootstrap mixin.make-grid（）， 因此，打印不会下降到xs大小

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

或者生成的css（如果您不喜欢使用较少的）：

---

IIRC这是由于页面的宽度只有几百个像素（~500px），这意味着通常用于手机/平板电脑的其他媒体查询也适用于页面打印。一个很好的解决方案：可以修复它，但希望有正确的方法。使用xs大小，过于挑剔，会使在更小的手机上阅读变得困难…包括iPhone。我尝试了这个，但没有效果。使用bootstrap 3.1Thanks，你今天刚刚救了我的命：）感谢试用1：我使用了X列它工作了试用2：sm列+横向模式打印也工作了试用3：md列+横向模式打印也工作了试用4列lg+横向模式打印也工作了试用5列lg纵向模式打印中断试用6列md纵向模式打印中断---所有这些变化可能是由于我的不均匀div setupAs@vijay说它将在打印模式下使用X列，有没有办法改变这一点？我需要打印页面，因为它在大型设备（lg列）上的外观？对于我来说，IE11的收缩适合工作良好，只要我们定义顶部容器的固定宽度，并将其左对齐（删除自动边距），为了不将此代码应用于IE11，我使用了

@媒体打印和（-webkit最小设备像素比：0）

仅与chrome匹配，但请注意，我的内部系统没有FF要求。这很好，但不完整。为了实现这一点，您还必须复制到打印样式表中。@NathanArthur您的链接已断开。@修改后的链接仍然断开。我使用的是Bootstrap版本4.3.1，并且使用的是此方法的修改版本或者我：使用@media print，我只将百分比属性应用于.col-sm-1到.col-sm-12，因为其他类没有在引导4中使用。现在我只需要为可变宽度列找到类似的解决方案，即当.col-sm auto和col在一行中一起使用时。我不希望定义可变宽度列的打印视图调整移动视口的大小。

@media print {
  [class*="col-sm-"] {
    float: left;
  }
}

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

@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%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}