隐藏仅适用于移动设备的元素-语义UI [英] Hide element for mobile only - Semantic UI

问题描述

我在隐藏移动设备的图像时遇到问题.我正在使用语义UI框架.在文档中，我找到了一些类:

I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes:

1. 仅移动设备-仅在768像素以下显示
2. 仅限平板电脑-仅显示768像素-991像素
3. 仅计算机-始终显示992px及以上

例如，我使用仅限计算机"类在平板电脑和移动设备上隐藏图像，但结果使我感到困惑.

Just for example, I'm using "computer only" classes to hide image on tablets and mobile, but the result confused me.

<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.</h1>
    </div>
    <div class="seven wide computer only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    </div>
  </div>
</div>

http://jsfiddle.net/3xkrx/318/

推荐答案

我还找到了另一种解决方案.可能对某人有用.

Also, I found one more solution. May be for someone it will helpful.

我在要隐藏在移动设备上的列中添加了移动设备已隐藏" 类.

I've added classes "mobile hidden" to column which I wanted to hide on mobile devices.

<div class="ui grid stackable">
 <div class="row middle aligned">
  <div class="nine wide column">
   <h1 class="ui header blue">Default Header.</h1>
  </div>
  <div class="seven wide column mobile hidden">
    <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
  </div>
</div>

这篇关于隐藏仅适用于移动设备的元素-语义UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！