19

我正在开发一个基于 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），我正在引导文件中搜索它，但找不到任何参考。

我的示例代码（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

有任何想法吗？

4

2 回答 2

21

引导文档有点不清楚。

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

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

然后当点击底部的编译按钮时，更少的代码被编译成 CSS。此编译会将所有出现的@screen-sm 替换为 768px，其他参数也相同。

于 2013-09-14T20:16:20.757 回答
1

@adonbajrami：我认为您需要@import "myStyle.less"在文件底部添加bootstrap.less。

该文件bootstrap.less导入variables.less. 将您的文件包含在同一个父文件中将使您的文件myStyle.less可以访问 variables.less 中声明的变量。

（很抱歉没有在适当的地方发表评论，但我还不能。）

于 2013-11-27T14:52:41.097 回答