引导，头部元素中的填充答案

【问题标题】：bootstrap, padding in head element引导，头部元素中的填充
【发布时间】：2014-03-03 19:53:48
【问题描述】：

谁能告诉我为什么 Initializr 的 bootstrap html 模板在页面头部的元素中具有单一的 body 样式？它就在 bootstrap.css 文件之后。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

我的问题是：直接在标记中抛出一次性样式而不只是将其包含在 bootstrap.css 文件中是不是有点奇怪？有没有人知道为什么这样做的具体原因？ CSS 属于 CSS 文件，不是吗？

【问题讨论】：

你想说什么？喝杯咖啡，重新表达你的问题:)
哎呀！也许是因为我刚刚狼吞虎咽的浓缩咖啡。编辑帖子。
好的，我的 stackoverflow 失败了。答案可能是这个 sn-p 是 Bootstrap 的 Jumbotron 示例附带的“jumbotron.css”文件中存在的唯一样式，这是 Intializr Bootstrap 样板所基于的。它特定于覆盖 Jumbotron 的 50 像素高的导航栏。看起来写 Intializr 模板的人认为最好将这个样式元素放在头上，而不是使用 bootstrap.css，而不是包含 jumbotron.css 文件。不知道为什么这是最佳做法...

标签： css twitter-bootstrap padding

【解决方案1】：

我会假设快速浏览一下，因为它与该页面特别相关。

如果在另一个页面上您不想要导航栏怎么办？然后，您必须手动覆盖 .css 文件中实现的样式以更正填充。鉴于这只是一个声明，我会说将其包含在页面顶部而不是将其放入它自己的 .css 文件中是公平的。

您真的想通过包含可能特定于页面的代码来隐藏框架 .CSS 文件（这会使框架变得混乱）吗？

编辑：详细说明-如果您在数十个页面上具有严格的结构，并且每个页面都具有一致的样式，那么将这些内容集中到一个 .css 文件中才有意义，但是从行业的角度来看，我会超过-可能仍未将其放入框架 .css 文件中（考虑未来的实现、升级框架、版本控制等）。

【讨论】：

完全同意它不属于 bootstrap.css 文件，现在我意识到这是由 Initializr 生成的模板，并且样式是特定于“Jumbotron”布局的。然而，Bootstrap 将样式包含在单独的 jumbotron.css 文件中似乎是一个更好的选择。我想我会通过在 body 标记上放置一个“jumbotron”类来命名整个页面，当它包含这个 jumbotron 功能时，并且在 main.css 中有一个 body.jumbotron 声明......我只是很困惑早一点。
这完全是合理的推理，但我认为它在模板中的实现方式也很好：在顶部声明自定义 CSS 的单个 .html 简单而有效；出于这个原因创建一个样式表文件似乎有点矫枉过正，就像把它放在标记中一样——因为没有更好的词：懒惰。
是的，我想让我明白的是 main.css 文件在生成的项目脚手架中只是空的...谢谢您的关注。

【解决方案2】：

我看到了这个并且几乎消除了我的 Initializr 基础，因为：

A) Initializr index.html 与getbootstrap.com 上的同一页面呈现不同，我不知道为什么

B) 因为没有评论，所以这个样式为什么会被内联在<head> 部分中根本不明显。

谢天谢地，我没有删除 Initializr 文件。事实证明getbootstrap.com 包含这些相同的样式（但通过一个名为 theme.css 的非常小的样式表）。这些值与您提到的值有些不同，但想法相同。

我引用的主题包括这个 theme.css：

body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

所以，长话短说——Initializr 在这里做了正确的事情，在我看来删除了额外的包含......但是， 解释了这些样式应该在那里。大多数部分都有 cmets，但这个 sn-p 没有。

无论如何，我会保留我漂亮的 Initializr Bootstrap 代码库，并弄清楚哪些页面需要什么 sn-ps 的什么值 lol。

【讨论】：