当前位置:首页 > 移动端开发

Bootstrap显示与隐藏的解决原理

小强的家   发布时间:2019-04-21   

就像Bootstrap一样,Ionic(Ionic 3)允许我们使用 col-sm-8 ,根据屏幕大小调整列的宽度col-md-6 , col-lg-4 。 Bootstrap还附带类似 visible-xs , hidden-sm 等类,使我们能够显示或隐藏内容根据屏幕尺寸。 Ionic 3是否附带任何可以让我们这样做的东西?


解决方案

我将以下CSS类从Bootstrap 4 Alpha复制到我的项目,他们工作得很好。


  .invisible {
 visibility:hidden!important; 
} 
 
 .hidden-xs-up {
 display:none!important; 
} 
 
 @media(最大宽度:575px){
 .hidden-xs-down {
 display:none!important; 
} 
} 
 
 @media(min-width:576px){
 .hidden-sm-up {
 display:none!important; 
} 
} 
 
 @media(最大宽度:767px){
 .hidden-sm-down {
 display:none!important; 
} 
} 
 
 @media(min-width:768px){
 .hidden-md-up {
 display:none!important; 
} 
} 
 
 @media(最大宽度:991px){
 .hidden-md-down {
 display:none!important; 
} 
} 
 
 @media(min-width:992px){
 .hidden-lg-up {
 display:none!important; 
} 
} 
 
 @media(最大宽度:1199px){
 .hidden-lg-down {
 display:none!important; 
} 
} 
 
 @media(最小宽度:1200px){
 .hidden-xl-up {
 display:none!important; 
} 
} 
 
 .hidden-xl-down {
 display:none!important; 
} 
  


相关文章:

Bootstrap显示与隐藏的解决原理评论(共有 0 条评论)

我要点评Bootstrap显示与隐藏的解决原理
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】