我正在使用真正有用的bootstrap hidden-xs,visible-xs等类来使问题页面响应。
我的一位客户将此页面嵌入他的网站,不幸的是,他只能支持700px的iframe宽度。
所以我的问题是,他在他的网站上获得了该页面的移动版本,因为引导程序xs从767px开始。
那么我该怎么做才能将此行为更改为650px?
我的覆盖css的方法是遵循,但没有任何改变:
@media (max-width: 650px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 650px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 650px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 650px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (max-width: 650px) {
.hidden-xs {
display: none !important;
}
}
答案 0 :(得分:0)
所以,我决定为这种情况创建我自己的附加 xxs类。对于遇到类似问题的每个人来说,需要使用所需宽度添加css:
.visible-xxs,
.visible-xxs-block,
.visible-xxs-inline,
.visible-xxs-inline-block {
display: none !important;
}
@media (max-width: 600px) {
.visible-xxs {
display: block !important;
}
table.visible-xxs {
display: table !important;
}
tr.visible-xxs {
display: table-row !important;
}
th.visible-xxs,
td.visible-xxs {
display: table-cell !important;
}
}
@media (max-width: 600px) {
.visible-xxs-block {
display: block !important;
}
}
@media (max-width: 600px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 600px) {
.visible-xxs-inline-block {
display: inline-block !important;
}
}
@media (max-width: 600px) {
.visible-xs {
display: none !important;
}
}
@media (max-width: 601px) {
.hidden-xxs {
display: none !important;
}
}
@media (min-width: 601px) and (max-width: 766px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 601px) and (max-width: 766px) {
.visible-xs-block {
display: block !important;
}
}
@media (min-width: 601px) and (max-width: 766px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (min-width: 601px) and (max-width: 766px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}