覆盖bootstrap hidden-xs媒体查询

时间:2015-11-26 09:11:38

标签: css twitter-bootstrap responsive-design

我正在使用真正有用的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;
    }
}

1 个答案:

答案 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;
    }
}