hidden-xs隐藏了在Bootstrap中打印的div

Question

在MVC项目中，我们使用bootstrap。

需要隐藏xs设备的div，并且必须在打印和桌面时显示。

代码如下：

<div class="hidden-xs">
    --Content--
</div>

但它在打印到窗口时隐藏了div。

Answer 1

<div class="hidden-xs print-visible"> content </div> 
@media print{
  .print-visible{
       display: block !important;
   }
}

将另一个用户定义的类添加到hidden-xs div（如上所述），并在样式表中添加上述规则。希望它能解决你的问题。

Answer 2

  

Bootstrap提供了一些辅助类，用于更快的移动友好开发。这些可用于通过媒体查询显示和隐藏内容，并结合大型，小型和中型设备。

  <div class = "container">
   <div class = "row visible-on">
        <div>             
             <span class = "hidden-xs">Extra small</span>
             <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
  </div>  
</div>