为什么嵌套的div（Bootstrap示例）这么常见？ [英] Why are nested divs (Bootstrap example) so common?

问题描述

Bootstrap是我注意到这种做法的许多网站之一，对我来说似乎不好，但它是足够广泛，由比我更有经验的人，我认为我必须缺少的东西做。例如， Bootstrap 的2.1.0版本，如果您查看源代码，第44-46行（页首菜单）是这些：

Bootstrap is one of many sites where I have noticed this practice, that to me seems bad but it is widespread enough, and done by people more experienced than me that I think I must be missing something. Take for instance the 2.1.0 version of Bootstrap, if you view source, lines 44-46 (the top of page menu) are these:

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

我理解每个类的相关CSS属性，以及使用一个框架的缺点对尽可能多的情况下尽可能多的人有用，但已大体完成了一个设计，我现在正试图清除我的标记。有没有理由使用3 divs，当2（我可以告诉）足够吗？

I understand the associated CSS properties of each class, and the shortcomings of using a framework that is made to be useful to as many people in as many situations as possible but having largely finished a design I am now trying to clean my markup. Is there a reason to use 3 divs when 2 would (from what I can tell) suffice?

'.container'有一个设置的宽度，清除属性和边距设置为中心，我不明白为什么'.navbar-inner' div从它的父。它似乎更有意义，将它作为一个类添加到它的父div和减少一层嵌套。

While '.container' has a set width, clear properties, and margin settings for centering, I don't understand why '.navbar-inner' is in a separate div from it's parent. It seems like it would make more sense to add it as a class to it's parent div and reduce one layer of nesting.

有什么我应该离开这个结构

Is there a reason why I should leave this structure in place (or for that matter something I should incorporate into future coding practices)?

推荐答案

在大多数情况下，你可以减少复杂性

In most cases you could reduce the complexity of the markup by combining several classes like

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

或

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

但是对于这种标记来说，你必须生成相当多的CSS规则满足每一种情况。

But for that kind of markup to work, you would have to generate quite a lot of CSS rules to satisfy every case.

通过分离CSS中的大多数用例和标记，你最终得到的东西是可读的，而不是那么沉重的CSS和HTML两边

By separating most use-cases in CSS and with the markup, you end-up with something quite readable and not so heavy on both CSS and HTML sides.

这也允许您为许多用户满足大量的组合。

This also allows you to satisfy lots of combinations for a lot of users.

IMHO，该层次结构背后的主要原则是可扩展性。因为你可以轻松地删除 .container 来放置别的东西 - 或者只是移动到别的地方。

IMHO, the main principle behind that hierarchy is scalability. Because you can easily remove the .container to put something else - or just move it elsewhere. This is only for later use, when you'll read your code again, in 10 years maybe.

另一个我想指出的原则是封装。如果你用面向对象的语言（JS，C ++，C＃，Java，许多其他人）编程，那么你必须熟悉它。

Another principle I'd like to point out is encapsulation. If you program in object oriented languages (JS, C++, C#, Java, many others..) then you must be familiar with it.

基于你的例子： / p>

Based on your example :

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

.container 不应为了解的容器 - 你似乎同意 - 但 .navbar-inner 也不知道自己的。

The .container should not be aware of its container - you seem to agree with that - but nor should the .navbar-inner be aware of its own .navbar state : whether it's fixed, inverse, or not even a navbar.

.navbar-inner 只应该为其孩子提供适当的行为，我认为这是为什么最好保持分离，即使你可以与导航栏混合。

The .navbar-inner should only serve to provide its children the appropriate behavior, and I think that's why it's best to keep it separated, even if you could mix it with the navbar.

也许在一些新版本中，或者只是想更改默认行为，navbar及其内部可能会有冲突。

Maybe in some new versions, or just if you want to change the default behavior, there may be conflicts between the navbar and its inner.

让我们试着避免这种情况并保持预期的结构。它看起来不是那么混乱...

Let's try to avoid that and keep the intended structure. It doesn't look so messy anyway...

这篇关于为什么嵌套的div（Bootstrap示例）这么常见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！