Bootstrap 3.0媒体查询

Question

我正在开发一个基于Boostrap 3(html5boilerplate自定义版本)的小项目,并试图在boostrap文档中使用"官方"媒体查询:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

由于某种原因,媒体查询似乎不存在(@ screen-sm,screen-md,screen-lg),我在bootstrap文件中搜索但是找不到任何引用.

我的示例代码(main.css):

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {

    .header-btn {display: none;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {

    .slogan {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}

基本上发生了什么......没什么!

我在Chrome中遇到了这些错误:http: //i.solidfiles.net/0d0ce2d2a7.png

有任何想法吗？

Answer 1

bootstrap文档有点不清楚.

将这些@...参数用于min-width实际上是较少的语法,而不是CSS.

您应该使用Bootstrap中的自定义实用程序(请参阅媒体查询断点)来设置您想要这些screen-xxx参数的内容(例如,将screen-sm设置为768px).

然后单击底部的"编译"按钮,将较少的代码编译为CSS.这个编译将用768px替换所有出现的@ screen-sm,其他参数也是如此.