引导、更少、媒体-查询

Question

我使用Twitter-Bootstrap & 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 */
    }
}

所以我的问题是-我必须把所有的媒体查询放在less文件的末尾，或者为什么它们在最后的位置工作，而不是在它们使用的类的解密之后？

Answer 1

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

你应该只在你的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)";