Question

有谁可以告诉我为什么在这个世界中Initializr的bootstrap html模板在页面顶部的元素中有一个单一的样式？它就在bootstrap.css文件之后。

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

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

Answer 1

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

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

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

编辑：详细说明 - 如果你有几十个页面的严格结构，每个页面都有一致的风格，那么将这些内容集中到.css文件中是有意义的，但是从行业的角度来看，我会更多 - 可能仍然没有将它放入框架.css文件（考虑未来的实现，升级框架，版本控制等）。

Answer 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通过删除额外的包含来做正确的事情......但是，解释那些样式应该在那里。大多数部分都有评论，但此片段没有评论。

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

引导，头元素填充

2 个答案: