Bootstrap，less，media-queries

Question

我使用Twitter-Bootstrap＆amp; Jasny-Bootstrap并有以下媒体查询：

// --- Media Queries (navmenu-main) ---
@media (min-width: 992px) {
    body {
        // Padding to move content beside "navmenu-main"
        padding: 0 0 0 300px;
    }

    .navmenu-main {
        // Remove Top-Padding from "navmenu-main" because it's only needed with "navbar-usage"
        padding-top: 0;
    }
}


// --- Media Queries (navbar-main) ---
@media (min-width: 1px) {
    .navbar-main .navbar-toggle {
        // Force to show toggle button
        display: block !important;
    }
}

@media (min-width: 992px) {
    .navbar-main {
        // IE8 fix from "jasny-bootstrap" example 
        display: none !important; /* IE8 fix */
    }
}

所以我的问题是 - 我是否必须将所有媒体查询放在较少文件的末尾，或者为什么它们在最后一个位置工作，而不是在它们使用的类的声明之后？

Answer 1

您必须制作单独的自定义css文件并将其链接到index.html页面。将链接放在index.html中的bootstrap结束样式表之后的css中。然后在您创建的文件中放置自定义媒体查询，因为浏览器最后会读取自定义样式表并从那里获取信息。

你应该只在你的CSS中使用@media（min-width：992px）{}，并且你把所有的风格放在那里。

您可以在此处阅读有关媒体查询的更多信息：

http://getbootstrap.com/css/

Answer 2

您还可以像这样使用断点：

@mobile:     ~"(max-width: 767px)";

@tablet:     ~"only screen and (min-width: 768px) and (max-width: 991px)";

@desktop:     ~"only screen and (min-width: 992px) and (max-width: 1199px)";

@desktop-xl:     ~"only screen and (min-width: 1200px) and (max-width: 1350px)";