hidden-xs 在 Bootstrap 中隐藏 div

Question

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

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

代码如下：

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

但它在打印到 window 时隐藏 div。

Answer 1

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

  <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>

Answer 2

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

将额外的用户定义 class 添加到 hidden-xs div（如上），并按照您的风格 sheet 添加上述规则。希望它能解决您的问题。