Bootstrap - 修改媒体查询

Question

我正在使用twitter-bootstrap 2.2.8和rails 4.

在适用的情况下，我使用以下课程为桌面设备，平板电脑和手机设置了不同的div：

.visible-desktop, .visible-tablet, .visible-phone

问题是，随着bootstraps媒体查询的工作方式，iPad（横向）使用的是桌面代码，而不是平板电脑版本，这是一个主要问题。

有没有办法修改bootstraps媒体查询，以便平板电脑的最大宽度为1024px而不是当前值（979px）？

Answer 1

如果您不介意攻击Bootstrap CSS，您只需找到媒体查询并将其更改为您想要的任何宽度/高度。你会找到像这样的行

@media (min-width: 768px) { /*some css*/}

只需将这些值更改为您想要的任何值（媒体查询将出现在整个css的许多不同位置），这将改变各种类，因此在您的情况下应该有类似

的内容

@media (max-width: 979px) {
    .visible-tablet{
        display:block;
    }
}

只需将该媒体查询更改为1024即可。请注意过多地搞乱媒体查询，因为某些具有宽度的类（例如各种span*类）可能会在您开始弄乱媒体查询更改的点时开始表现得很奇怪。