3

我遇到了这篇文章中描述的问题：

Twitter Bootstrap 响应式导航栏在小屏幕上损坏

不过，我不确定如何在 Meteor 中解决这个问题，因为 Meteor 似乎在幕后完成了所有这些工作......

4

1 回答 1

3

我发现这个问题很有趣，可以找出一些解决方案，并收集关于这个问题的一些基本想法。

Meteor 在其文档中声明应用程序的编写方式应该对文件加载的顺序不敏感（请参阅Meteor 文档）。虽然这（理想情况下）是设计和加载 javascript 模块和依赖项的一个很好的范例，但它提出了在像bootstrap这样的基础上定义用户样式时如何做到最好的问题。

事实上，当涉及到 css 时，顺序很重要，因为特定样式应该覆盖默认样式。使用像 Meteors bootstrapbootstrap.css包这样的智能包，bootstrap_responsive.css一个接一个的加载顺序是固定定义的。如此说来，在它之间“即时”放置一些东西是不可能的。

推荐的解决方案：在 boostrap/responsive 之上覆盖：

在我看来，最佳实践是定义和加载用户样式，使其在加载所有基础文件后按预期工作。一个例子：

引导用户.css：

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

将其放入您的用户 css 文件之一，一切都应该没问题。项目根目录中的用户 css 文件总是在智能包文件（如引导包链接的那些文件）之后加载。

好吧，这是“跨风格”的方法

如果您仍然想以this answer中描述的方式破解它（甚至推特本身也建议），您可以编写自己的智能包：

包.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 文档的概念部分中进行了描述。但是：这意味着以反映所需顺序的字母方式命名文件！（不是很优雅）

但是，我个人不喜欢后一种方式描述的解决问题的方式。

最后但并非最不重要的一点：当然，有时它是构建和编译自己的 boostrap 变体的最佳方式，其中所有需要的样式都被压缩到一个文件中。

于 2012-10-25T15:44:56.137 回答