背景信息
我正在使用引导程序尝试我的第一个响应式应用程序。到目前为止，一切都很好。但我试图针对 google nexus 7，默认情况下，它似乎被归类为基于我在 bootstrap-responsive.css 中看到的以下 css 的“电话”：
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
在其中一页中，我有以下逻辑：
<div class="row-fluid visible-desktop">
some html here for desktop version only
display big buttons
</div>
<div class="row-fluid visible-tablet">
some html here for ipads
display medium buttons
</div>
<div class="row-fluid visible-phone">
display divs, not buttons.
</div>
问题
目前，纵向模式的nexus 7正在拿起手机部分，我不明白为什么？我的另一个问题是如何在我自己的自定义 css 中覆盖或重新定义引导程序的“电话”媒体查询？（请参阅下面的注释以了解我到目前为止所做的尝试）
到目前为止我尝试过的：
作为测试，我使用 nexus 访问了 resizemybrowser.com，它说在纵向模式下当前内部为 980x1294。我想我不明白为什么如果尺寸真的那么高，nexus 会显示我的手机部分？也许我误解了 resizemybrowser.com 网站显示的信息。
我也一直在玩我的 custom.css 并找到了一个似乎正确地针对我的关系的浏览器大小：
/* Google Nexus 7 Portrait */
@media (min-width:500px) and (max-width: 720px) and (orientation:portrait){
body{
background-color: green;
}
}
我正在使用nexus 7、ipod 5、iPad 和三星galaxy 3 进行测试，并且通过上述媒体查询，唯一获得绿色背景的设备是nexus ......这就是我想要的。所以我在想我可以在引导响应中重新定义媒体查询，使其看起来像这样：（基本上只是将浏览器的最大尺寸从 767 更改为 500px）。
@media (max-width: 500px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
这个想法是为手机定义一个更小的浏览器大小......然后我将创建一个新的媒体查询，该查询将针对迷你平板电脑。但似乎通过在我的 custom.css 中创建上述媒体查询并不会替换/覆盖引导程序中的媒体查询。我不想直接更改引导程序中的代码。你能告诉我我做错了什么吗？
谢谢。
编辑1：
这就是我加载两个 css 文件的方式：
<link href="<?php echo base_url('assets/css/bootstrap-responsive.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assets/css/custom.css')?>" rel="stylesheet">