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