就像Bootstrap一样,Ionic(Ionic 3)让我们可以使用col-sm-8,col-md-6,col-lg-4根据屏幕大小调整列的宽度. Bootstrap还带有visible-xs,hidden-sm等类,使我们能够根据屏幕大小显示或隐藏内容. Ionic 3是否附带任何可以让我们这样做的东西?
在小屏上隐藏页脚最下面的内容(隐藏知更鸟主题友联例子)
将下面样式添加到主题选项→定制风格→自定义样式代码框中
代码一:
@media screen and (max-width:550px){#links{margin:6px 0 0 0;display:none;}}
代码二:
- @media screen and (max-width: 550px) {
- .links-box {
- display: none;
- }
- }
最佳答案
我将以下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; }