<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <style> .tips1{ width:30px; height:300px; background:black; right:0; } .tips2{ width:30px; height:100px; background:blue; right:0; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="tips1 visible-lg-block affix"></div> <div class="tips2 hidden-lg affix"></div> </div> <div>aaaaaaaaaa</div> </div> </body> <script> /* 响应式工具 概念 -针对不同设备展示或隐藏页面内容 可见类 -visible*-* 》lg md sm xs 》block inline inline-block -hidden-* 》lg md sm xs 打印类 -visible-print-* hidden-print 实例：天猫侧边栏 */ </script>