3

この投稿で説明されているように、私は問題を抱えています:

小さな画面で Twitter Bootstrap レスポンシブ ナビゲーション バーが壊れる

ただし、Meteor は内部ですべてを行っているように見えるため、Meteor でこれを修正する方法がわかりません...

4

1 に答える 1

3

この質問は、いくつかの解決策を見つけ出し、この問題に関するいくつかの基本的な考えを収集するのに十分興味深いものであることがわかりました。

Meteor はそのドキュメントで、ファイルがロードされる順序に影響されないようにアプリケーションを作成する必要があると述べています( Meteor のドキュメントを参照)。これは（理想的には）javascript モジュールと依存関係を設計およびロードするための優れたパラダイムですが、 bootstrapのような基盤の上にユーザー スタイルを定義するときに最善を尽くす方法について疑問が生じます。

実際、特定のスタイルがデフォルトのスタイルをオーバーライドするように、css に関しては順序が重要です。Meteorsのブートストラップパッケージのようなスマート パッケージでは、との直接ロード順序が固定的に定義されています。したがって、「その場で」間に何かを置くことは不可能です。bootstrap.cssbootstrap_responsive.css

推奨される解決策: boostrap/responsive の上でオーバーライド:

私の意見では、ベスト プラクティスは、すべての基本ファイルの後にロードするときに、ユーザー スタイルが希望どおりに機能するようにユーザー スタイルを定義してロードすることです。例：

ブートストラップ-user.css :

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

これをユーザー css ファイルの 1 つに入れれば、すべてうまくいくはずです。プロジェクト ルートのユーザー css ファイルは、ブートストラップ パッケージによってリンクされたようなスマート パッケージ ファイルの後に常に読み込まれます。

さて、これが「インタースタイル」アプローチです

それにもかかわらず、この回答で説明されているように(さらには twitter 自体が示唆している)その方法でハッキングしたい場合は、独自のスマート パッケージを作成することができます。

package.js :

Package.describe({
  summary: "UX/UI framework from Twitter - My variant"
});

Package.on_use(function (api) {
  api.add_files('css/bootstrap.css', 'client');
  api.add_files('css/bootstrap-pre-responsive.css', 'client');
  api.add_files('css/bootstrap-responsive.css', 'client');
  ...
  // More resource definitions like glyphicons-halflings go here
  ...
}

パッケージ ファイルcss/bootstrap-pre-responsive.cssには以下が含まれます。

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

または、ブートストラップ統合にスマート パッケージを使用するのをスキップして、代わりに Meteor にプロジェクト リソースの収集とロードを任せることもできます。プロジェクト ルート内のロード順序の規則については、Meteor ドキュメントのコンセプト セクションで説明されています。しかし: これは、希望する順序を反映するアルファベット順でファイルに名前を付けることを意味します! （あまりエレガントではありません）

ただ、個人的には後者のように問題を解決する方法は好きではありません。

最後になりましたが、もちろん、必要なすべてのスタイルを 1 つのファイルに縮小して独自のブーストラップ バリアントをビルドおよびコンパイルするのが最善の方法である場合もあります。

于 2012-10-25T15:44:56.137 に答える