3
就像Bootstrap一样,Ionic(Ionic 3)可让我们根据屏幕尺寸使用col-sm-8
,col-md-6
,col-lg-4
调整列宽。 Bootstrap还附带类似visible-xs
,hidden-sm
等类,使我们能够根据屏幕大小显示或隐藏内容。 Ionic 3是否带有可以让我们做同样的事情?如何根据屏幕尺寸隐藏或显示内容?
就像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;
}
Docs
: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/