Bootstrap忽略某些媒体查询
我目前有以下scss文件的内容：
/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { // Something here } /* Desktop */ @media (min-width: 981px) and (max-width: 1198px) { // Something here } /* Large Desktop */ @media (min-width: 1200px) { // Something here } 如果我在Rails中加载application.css文件，我会得到以下内容：
/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { /* Remove gap between nav and content*/ /* line 120, ../../app/assets/stylesheets/static_pages.css.scss */ .navbar-fixed-top { margin-bottom: 0 !important; } /* Remove any padding from the body */ /* line 125, ../../app/assets/stylesheets/static_pages.css.scss */ body { padding-top: 0 !important; } /* line 133, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .landing .sign-up { display: none; } /* line 142, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .container #students #bulletpoints h2, .static_pages-controller-home .container #students #bulletpoints p { text-align: left !important; } } /* Desktop */ /* Large Desktop */ @media (min-width: 1200px) { /* Remove gap between nav and content*/ /* line 168, ../../app/assets/stylesheets/static_pages.css.scss */ .navbar-fixed-top { margin-bottom: 0 !important; } /* Bypass left & right padding */ /* line 186, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .container #students #bulletpoints h2 { text-align: left !important; } }
请注意，在编译文件中，我们有注释/* Desktop */但媒体查询中的CSS不存在，事实上似乎编译忽略了整个媒体查询。 有办法解决这个问题吗？
我的目标是为该宽度范围设置一些css。
在没有看到您的实际代码的情况下，我最好的猜测是您在未编译的文件中有一个错误的错误。 没有理由不能为桌面系列提供一些css。
你可以试试这个。
备份您的未编译文件，然后启动一个新的文件：
/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { // Something here font-color{ color:red; } } /* Desktop */ @media (min-width: 981px) and (max-width: 1198px) { // Something here font-color{ color:green; } } /* Large Desktop */ @media (min-width: 1200px) { // Something here font-color{ color:blue; } }
编译并惊讶，惊喜字体颜色会在不同的视点发生变化。
一旦你完成了这项工作，就可以逐个添加其他@media内容，这样你就可以找出原因。
祝好运
老帖但也许我可以帮助别人。
我解决了这个问题，在...添加了这个HTML
... ...