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 の Customize ユーティリティを使用して( 「メディア クエリのブレークポイント」を参照)、これらのscreen-xxxパラメータを設定する必要があります (例: screen-sm を 768px に設定)。

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

于 2013-09-14T20:16:20.757 に答える
1

@import "myStyle.less"@adonbajrami: ファイルの末尾に追加する必要があると思いbootstrap.lessます。

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

（その場でコメントできなくて申し訳ありませんが、まだできません。）

于 2013-11-27T14:52:41.097 に答える