Bootstrap - 修改媒体查询答案

【问题标题】：Bootstrap - Modify Media QueriesBootstrap - 修改媒体查询
【发布时间】：2014-06-11 21:09:40
【问题描述】：

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

在适用的情况下，我使用以下类为台式机、平板电脑和手机设置了不同的 div：

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

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

有什么方法可以修改引导媒体查询，例如，平板电脑的最大宽度为 1024 像素，而不是当前值 (979 像素)？

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

听起来不错，但我究竟在哪里可以找到引导 css？我能看到的唯一样式表是 bootstrap_and_overrides.css.less 并且媒体查询肯定没有写在那里！
啊，你用的少了。没有意识到这一点。恐怕我对如何使用 Less 及其工作原理一无所知。也许遇到这个问题的其他人可以启发我们。也可能是您正在使用 CDN 中的 Bootstrap，在这种情况下您无法修改它。在源代码处查看您的实际网页，并查看 bootstrap.css 的来源。
我使用的是 twitter-bootstrap-rails，所以它是一个 rails gem，所以所有的样式都指向那个 less 文件。对于第一次使用的用户来说，定制是一种痛苦。