Ausblenden element für die mobile-only - Semantic-UI

Problem habe ich mit ausblenden image für mobile Geräte. Ich bin mit Semantic-UI-framework. In der Dokumentation fand ich einige Klassen:

  1. mobile-only - zeigt nur unterhalb von 768px
  2. tablet-only - zeigt nur zwischen 768px - 991px
  3. computer nur - wird immer angezeigt, 992px und vor

Nur ein Beispiel, bin ich mit "nur computer" - Klassen zu verbergen, Bild auf tablets und mobile, aber das Ergebnis verwirrt mich.

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

Konnte Sie klären Sie die Frage, bitte? Was ist das Ergebnis verwirrt Sie?

InformationsquelleAutor WhatIsHTML | 2016-07-04

  1. 9

    Ausserdem fand ich noch eine Lösung. Vielleicht für jemanden wird es hilfreich.

    Habe ich Hinzugefügt Klassen "mobile hidden" auf die Spalte, die ich verstecken wollte auf mobilen Geräten.

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

    InformationsquelleAutor WhatIsHTML

  2. 7

    Hinzufügen mobile only grid zu img tag

    Der richtige Ausdruck ist unten:

    <img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    vielen Dank, es funktioniert gut in jsfiddle, aber funktioniert nicht auf meiner website. Bild auf Breitbild einfach verschwinden, dann passiert etwas Magisches. Ich benutzte class="ui-computer Bild nur raster "
    dies ist nicht zur Arbeit zu gehen, angeblich, weil Sie zeigen auf tablet

    InformationsquelleAutor vignesh

  3. 4

    Besuch hier funktioniert wirklich gut

    /* Mobile */

@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large monitor only"]:not(.mobile),
  [class*="widescreen monitor only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}
etc...

    https://jsfiddle.net/8LkLoxcx/

    InformationsquelleAutor Achmed Zuzali

Schreibe einen Kommentar