Bootstrap 控制移动端和网页端的元素隐藏和显示

逃离我推掉我的手 2022-06-07 05:23 416阅读 0赞

### **先看效果** ###

*  PC，显示3张图片

![这里写图片描述][SouthEast]

*  移动端，只显示一张

![这里写图片描述][SouthEast 1]

解决思路，用Bootstrap的网格系统。

*  visible-md-block 表示在早中型设备台式电脑（≥992px）可显示
 *  visible-lg-block 表示在大型设备台式电脑（≥1200px）可显示
 *  visible-xs-block 表示在超小设备手机（<768px）可显示

代码：

<div class="container">
        <div class="row">
            <div class="col-md-3 visible-md-block visible-lg-block">
                <a >
                    <img src="images/tm-sigma-00.jpg" class="img-responsive" style="height: 518px;">    
                </a>
            </div>
            <div class="col-md-6 visible-xs-block visible-md-block visible-lg-block">
                <a >
                    <img src="images/tm-sigma-00.jpg" class="img-responsive" data-preview-src="" data-preview-group="1" style="height: 518px;"> 
                </a>
            </div>
            <div class="col-md-3 visible-md-block visible-lg-block">
                <a >
                    <img src="images/tm-sigma-00.jpg" class="img-responsive" style="height: 518px;">    
                </a>
            </div>
        </div>
        </div>

[SouthEast]: /images/20220607/2ad08ec05a4447d59b58fb71b3db6bd8.png
[SouthEast 1]: /images/20220607/5f8fd8efb309459d908cf585a5ec5f0d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读

相关控制pc端和手机端显示不同的页面

这里介绍2种方法来控制pc端和手机端显示不同的页面 1、使用nginx根据userAgent控制跳转到不同的路径或者不同的域名 set $flag 0; i

待我称王封你为后i/ 2023年10月09日 09:45/ 0 赞/ 62 阅读

相关 js控制元素隐藏和显示

方法一： document.querySelector("id").style.visibility="hidden"; document.quer

爱被打了一巴掌/ 2023年06月08日 15:53/ 0 赞/ 52 阅读

相关 css元素的显示和隐藏

接下来的属性它也能控制元素是不是占有原来的位置。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

左手的ㄟ右手/ 2022年09月04日 03:53/ 0 赞/ 249 阅读

相关 javascript隐藏和显示元素

使页面元素隐藏和显示可以有两种方式：方式一：设置元素style属性中的display var t = document.getElementById('test'

傷城~/ 2022年08月18日 11:39/ 0 赞/ 226 阅读

相关 Bootstrap 控制移动端和网页端的元素隐藏和显示

先看效果 PC，显示3张图片 ![这里写图片描述][SouthEast] 移动端，只显示一张 ![这里写图片描述][SouthEast 1]

逃离我推掉我的手/ 2022年06月07日 05:23/ 0 赞/ 417 阅读

相关如何控制元素显示、隐藏？

http://www.w3school.com.cn/jquery/jquery\_hide\_show.asp ![70][] [70]: /images/2022053

￡神魔★判官ぃ/ 2022年05月30日 05:52/ 0 赞/ 427 阅读

相关控制HTML元素的显示与隐藏——display和visibility

</head> <body> <div>display：元素的位置不被占用</div> <div id="div1" style="display:block;">DIV

╰+攻爆jí腚メ/ 2022年05月08日 08:04/ 0 赞/ 287 阅读

相关 pc端和移动端的区别

1、操作方式不同 PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少。而对于手机端来说

Bertha 。/ 2021年11月08日 17:52/ 0 赞/ 469 阅读

相关移动端网页基础

移动端一、移动端背景 1.浏览器 2.手机屏幕二、视口 1.布局视口layout viewport 2

我会带着你远行/ 2021年09月07日 06:12/ 0 赞/ 546 阅读

相关 Bootstrap 页面元素隐藏与显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

快来打我*/ 2021年07月04日 23:23/ 0 赞/ 679 阅读