css - 在屏幕上显示时隐藏 Bootstrap 元素

在一个包含大量打印组件的元素中，我正在使用 boostrap 类 hidden-print 来隐藏应该出现在屏幕上而不是打印页面上的元素。这非常有效。

但是，我有一个 div，它应该仅出现在打印页面上，绝不会出现在任何屏幕设备上。我从 http://getbootstrap.com/css/(在 Print Classes 部分)中读到的是，使用类 visible-print-block 应该可以实现这一点。然而，当我使用这个标记时:

  <div class="visible-print-block">
  <img class="img-responsive center-block" src=". . ."/>
  </div>

我的图像在屏幕和打印版本上都可见。

如何使此 div 仅在打印页面上可见？

最佳答案

您使用哪个次要版本的 Bootstrap 3？在 3.0 中没有可见打印 block 的类。确保使用最新的 Bootstrap 。

或者尝试使用:

.visible-print-block{display:none!important;}

并且不要忘记让您的元素在媒体打印品上可见:

@media print{ .visible-print-block{display:none!important;}}

关于css - 在屏幕上显示时隐藏 Bootstrap 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31374799/