HTML5＆Bootstrap class =“ container”，它可以应用于body还是仅应用于div？

Question

我一直碰到这个问题，每个人都这样：a）希望用div包装HTML5语义标记，b）想要将类选择器应用于div，而不是语义标记。 好像人们出于某种原因担心将类推到语义标签上一样。

例如，我经常被告知这是“错误的”，

<body class="container">
    <header class="row">
        <div class="col-md-12"> ...

这样的事情更可取，

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

在这里，第一个示例在h2标签中有column类

    <div class="row">
        <h2 class="col-4 feature">Featured Work</h2>
    </div>

但是“正确”的方法是添加另一个div标签来应用该类，

    <div class="row">
        <div class="col-4 feature">
            <h2>Featured Work</h2>
        </div>
    </div>

我了解这可能是基于意见的，但是我发现在处理HTML5时，意见实际上很重要，因为几乎每个人都有问题，没有其他方法可以敲定没有意见的细节。

Answer 1

我建议坚持

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

格式。

如果您打算与许多其他开发人员或引导程序模板一起使用-您将看到容器类通常嵌套行类div。

由于我们在谈论标记，因此没有正确的答案，但是强烈建议您遵循此约定。

1. 为了一致性
2. 为了轻松更改其他项目的样式和可重用性，这甚至为从其他项目或自举模板中直接替换CSS样式表打开了大门。 （对此我取得了一些令人惊讶的好结果）。

但是，如果您坚持要给非div标签“容器”和“ col-X”标签，请保持一致。 不过，我不建议这样做，并且会考虑将遵循其自身约定的任何模板视为不良代码质量的指标。