为什么嵌套 div（Bootstrap 示例）如此普遍？答案

【问题标题】：Why are nested divs (Bootstrap example) so common?为什么嵌套 div（Bootstrap 示例）如此普遍？
【发布时间】：2012-08-23 06:12:40
【问题描述】：

Bootstrap 是我注意到这种做法的众多网站之一，对我来说这似乎很糟糕，但它已经足够普遍，并且由比我更有经验的人完成，我认为我一定遗漏了一些东西。以Bootstrap的2.1.0版本为例，如果查看源码，第44-46行（页面顶部菜单）是这些：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

我了解每个类的相关 CSS 属性，以及使用在尽可能多的情况下对尽可能多的人有用但已基本完成设计的框架的缺点.当 2 个（据我所知）就足够时，是否有理由使用 3 个 div？

虽然 '.container' 具有设置宽度、清晰属性和用于居中的边距设置，但我不明白为什么 '.navbar-inner' 位于与其父级不同的 div 中。将它作为一个类添加到它的父 div 并减少一层嵌套似乎更有意义。

我是否有理由保留这个结构（或者就此而言，我应该将其纳入未来的编码实践中）？

【问题讨论】：

【解决方案1】：

嵌套 div 允许您单独设置样式和访问它们，这可以派上用场。但当然这取决于您的实际需求，正如您所说，只需使用 css 而无需过多的 div 就可以完成很多工作。

【讨论】：

【解决方案2】：

在大多数情况下，您可以通过组合几个类来降低标记的复杂性，例如

<div class="navbar navbar-inverse navbar-fixed-top navbar-inner container">

或

<div class="navbar-inverse-fixed-top-inner-container">

但要使这种标记发挥作用，您必须生成相当多的 CSS 规则来满足每种情况。

通过将 CSS 中的大多数用例和标记分开，您最终会得到一些可读性很强的东西，并且在 CSS 和 HTML 方面都不那么繁重。

这也让您可以满足大量用户的大量组合。

恕我直言，该层次结构背后的主要原则是可扩展性。因为您可以轻松删除 .container 以放置其他东西 - 或者只是将其移动到其他地方。这仅供以后使用，当您可能在 10 年后再次阅读您的代码时。

我想指出的另一个原则是封装。如果您使用面向对象的语言（JS、C++、C#、Java 等）进行编程，那么您必须熟悉它。

根据您的示例：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">

.container 不应该知道它的容器 - 你似乎同意这一点 - 但 .navbar-inner 也不应该知道它自己的 .navbar 状态：它是否已修复，逆向，甚至没有导航栏。

.navbar-inner 应该仅用于为其子级提供适当的行为，我认为这就是为什么最好将其分开，即使您可以将其与导航栏混合使用。

也许在一些新版本中，或者只是想改变默认行为，导航栏和它的内部可能会发生冲突。

让我们尽量避免这种情况并保持预期的结构。反正看起来没那么乱……

【讨论】：

【解决方案3】：

这就是样式（在这种情况下，例如宽度/高度、边框、边距、填充）在不同浏览器（IE 与其他浏览器）上效果最佳的方式。

【讨论】：