So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

So verbergen Sie Elemente auf der mobilen Seite mit Bootstrap: Öffnen Sie zuerst die entsprechende Codedatei und verwenden Sie dann „visible-xs-block“, um die Anzeige festzulegen und auf ultrakleinen Geräten auszublenden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootstrap-Version 3. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „Bootstrap-Tutorial“

BootstrapSteuern Sie das Ausblenden und Anzeigen von Elementen auf Mobil- und Webseiten

Sehen Sie sich zuerst den Effekt an

• PC, zeigen Sie 3 Bilder an

• Auf der mobilen Seite wird nur ein Bild angezeigt

Die Lösung besteht darin, das Rastersystem von Bootstrap zu verwenden.

• visible-md-block bedeutet, dass es auf frühen und mittelgroßen Desktop-Computern (≥992 Pixel) angezeigt werden kann.

• visible-lg-block bedeutet, dass es auf großen Desktop-Computern (≥ 1200px)

• visible-xs -Block sagte, dass

Code:

 <p class="container">
    <p class="row">
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghw/default1.png"  data-src="images/tm-sigma-00.jpg"      style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" >    
            </a>
        </p>
        <p class="col-md-6 visible-xs-block visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghw/default1.png"  data-src="images/tm-sigma-00.jpg"    data-preview- data-preview-group="1"   style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" > 
            </a>
        </p>
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghw/default1.png"  data-src="images/tm-sigma-00.jpg"      style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" >    
            </a>
        </p>
    </p>
    </p>

🎜 Weitere Programmierkenntnisse können bitte auf dem superkleinen Mobiltelefon (& lt; 768px) angezeigt werden Besuchen Sie: 🎜 Programmieren Lernen 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!