twitter-bootstrap - 用于 Meteor 的 Twitter Bootstrap navbar-fixed-top 小屏幕修复

Question

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

Twitter Bootstrap Responsive Navbar Broken on Small Screens

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

Answer 1

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

Meteor 在它的文档中指出，应用程序应该以对文件加载顺序不敏感的方式编写(参见Meteor documentation)。虽然这是(理想情况下)设计和加载 javascript 模块和依赖项的良好范例，但它提出了在像 bootstrap 这样的基础之上定义用户样式时如何做到最好的问题。 p>

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

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

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

bootstrap-user.css:

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

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

好吧，这是“inter-style”方法

如果你仍然想像 this answer 中描述的那样破解它(甚至推特本身也建议)你可以去写你自己的智能包:

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;
}

或者，您可以跳过使用智能包进行 Bootstrap 集成，而是让 Meteor 收集和加载您的项目资源 - Meteor 文档的概念部分描述了项目根目录中加载顺序的约定。但是:这意味着以反射(reflect)所需顺序的字母顺序命名文件! (不是很优雅)

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

最后但并非最不重要的一点:当然，有时候构建和编译自己的 boostrap 变体并将所有需要的样式缩小到一个文件中是最好的方法。