就像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 (max-width: 575px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 576px) {
.hidden-sm-up {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-sm-down {
display: none !important;
}
}
@media (min-width: 768px) {
.hidden-md-up {
display: none !important;
}
}
@media (max-width: 991px) {
.hidden-md-down {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important;
}
}
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important;
}
}
.hidden-xl-down {
display: none !important;
}
文档:
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
原文地址:https://www.jb51.cc/css/427516.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。