使用流星的引导示例答案

【问题标题】：Bootstrap examples with meteor使用流星的引导示例
【发布时间】：2012-07-01 18:33:37
【问题描述】：

我正在使用 Meteor (fluid.html) 的引导示例。我已将引导程序更新到最新的 2.0.4。

但是我遇到了一个奇怪的问题，padding-top: 60px; 以错误的方式与

发生冲突

@media (max-width: 979px)
    body {
    padding-top: 0;
}

好吧.. webkit 似乎可以这样做（出于某种原因仅在 Meteor 上）：

它最终看起来像这样：

（黑条上方的顶部有一个间隙） - 当然这是流畅的布局，因此需要将浏览器向下拖动到小视图（对于 iPhone/Android/平板电脑）

我将如何设法让浏览器将padding-top: 0 作为首选项，所以它不这样做？或者为什么这样做（css文件以相同的顺序加载 - 首先是bootstrap.css，然后是bootstrap-responsive.css。我不知道有什么区别

【问题讨论】：

检查你的.navbar的navbar-fixed-top类
div 同时拥有navbar 和navbar-fixed-top
我几乎使用了确切的代码作为示例。它的流星以某种方式干扰
使用 Chrome 开发工具或 Google Firebug 来诊断哪个 CSS 规则/文件负责..
截图来自开发工具，似乎它优先于<style> 标记类而不是应该由bootstrap-responsive.css 提供的覆盖，尽管我无法弄清楚流星在做什么，因为这与 bootstrap 自己网站上的示例完全相同

【解决方案1】：

升级到 2.0.4 后，我仍然遇到使用 navbar-fixed-top 时在某些分辨率下内容会被隐藏的问题。这就是在某些分辨率下会发生的情况：

在调整 CSS 后，我想出了以下内容，当添加到我的 CSS 文件顶部时，它可以在所有分辨率下修复它：

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

希望这能解决您的问题。

【讨论】：

【解决方案2】：

它不只是这样做......

它的作用不止于此。您应该检查 padding-top 设置的内容，浏览整个面板并查看设置它的内容，这应该会告诉您问题出在哪里。在最坏的情况下，您可以使用padding-top: 0 !important;，尽管应该知道!important 是一个不好的建议，您应该能够绕过而不必添加它。

我不明白 Meteor 是如何负责的，因为据我所知，他们没有添加任何重大的 CSS 更改；但可能确实存在，但您只能通过查看 padding-top 的设置位置来判断。

【讨论】：

我想我找到了问题所在。 Meteor 以与示例略有不同的方式排列样式表的顺序。应该是 1) bootstrap.css 2) <style>...</style> 3) bootstrap-responsive.css 但是 CSS 是用流星一次性完成的，所以我想我必须手动修复。
@Akshat：style 标签从何而来？如果您只是创建一个将在引导后加载的.css。但是，如果您不使用 bootstrap 智能包；然后您可以通过使用目录来分隔样式表或将文件名更改为按需要加载的顺序按字母顺序排列样式表的顺序。订单确实是个小问题……
这些都是从示例中复制而来的。它是填充物的来源。我会尝试按字母顺序加载。
按字母顺序不起作用，因为两个引导程序包都会在我的 css 之前加载。它必须在引导程序包之前加载
为了覆盖 bootstrap 的行为，你的 css 不是必须在 bootstrap 的包之后吗？