web-dev-qa-db-ja.com

Bootstrap 3.0 Mediaクエリ

私は、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

何か案は？

csstwitter-bootstrapmedia-queries
19
user2646903

bootstrap=ドキュメントは少し不明瞭です。

これらを使用して@... min-widthのパラメーターは、実際にはless構文であり、[〜＃〜] css [〜＃ではありません〜]。

Bootstrapのカスタマイズユーティリティを使用 （メディアクエリブレークポイントを参照）を使用してこれらを設定しますscreen-xxxパラメータを指定します（たとえば、screen-smを768pxに設定します）。

そして、下部の[コンパイル]ボタンをクリックすると、少ないコードがCSSにコンパイルされます。このコンパイルにより、@ screen-smのすべての出現が768pxに置き換えられます。他のパラメーターも同様です。

21
mccannf

@adonbajrami：@import "myStyle.less"ファイルの下部にbootstrap.lessを追加する必要があると思います。

ファイルbootstrap.lessはvariables.lessをインポートします。同じ親ファイルにファイルを含めると、variables.lessで宣言された変数にmyStyle.lessアクセスできるようになります。

（コメントを付けていないのでごめんなさい、しかし私はまだできません。）

1
Marcus Nielsen