如何打印 Bootstrap 轮播中的所有项目

Question

我是 Bootstrap 的新手（仍然是 2.x），并且正在寻找一种在打印时在轮播中显示所有项目的方法。

我没有找到任何指针，所以这是我开始做的：

• bootstrap.css 隐藏了轮播项目：

  .carousel-inner > .item { 显示：无 ....

• 当我要打印时，动态修改要显示的项目的 .css。这会将它们全部堆叠起来。

  $('.item').css("display", "block");

• 对于我的应用程序，我想要一个多页文档，每个轮播项目一页。我还在 @media print { } 部分添加了强制分页符：

  .项目{ 分页后：总是；}

希望这可以节省一些时间。如果有更好的方法，请补充！

谢谢！我无法计算 stackoverflow 为我节省了大量时间的次数。 詹姆斯

Answer 1

我用这个css

@media print {
 .carousel-indicators{display: none;}
 .item{display:block;}
 .item { page-break-after:always;}
};

别忘了指定图片高度！

<img src="img.png" height="400" alt="...">

Answer 2

对于 Bootstrap 版本 4，它是“.carousel-item”而不是“.item”：

@media print {

   .carousel-item { 
     display: block; /* display all slides for print media */
   }

};

Answer 3

原来我需要添加 !important 才能使其工作。如果你使用淡入淡出，你也需要添加不透明度：

@media print {
   .carousel-item { 
     display: block !important;
     opacity: 1 !important;
   }

};