- 响应式显示隐藏
<style>
.container {
height: 100px;
}
.container .row {
height: 100%;
}
.container .row>div {
/* width: 100%; */
height: 100%;
background-color: pink;
border: 2px solid red;
box-sizing: border-box;
}
</style>
<body>
<div class="container">
<div class="row">
<!-- 隐藏的样式 是在一个范围内设置隐藏 所以不存在向上兼容 向下覆盖 -->
<!-- 当在xs屏的时候隐藏1 -->
<div class="col-xs-3 hidden-xs">1</div>
<!-- 当在sm屏的时候隐藏2 -->
<div class="col-xs-3 hidden-sm">2</div>
<!-- 当在md屏的时候隐藏3 -->
<div class="col-xs-3 hidden-md">3</div>
<div class="col-xs-3 ">4</div>
</div>
</div>
</body>
xs隐藏1 767
sm隐藏2 768
md隐藏3 992
响应式隐藏显示是在一个区间内设置display:none 不存在向上兼容向下隐藏
