繁体   English   中英

HTML5&Bootstrap class =“ container”,它可以应用于body还是仅应用于div?

HTML5 & Bootstrap class=“container”, can it be applied to body or only div?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我一直碰到这个问题,每个人都这样: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时,意见实际上很重要,因为几乎每个人都有问题,没有其他方法可以敲定没有意见的细节。

1 个回复

我建议坚持

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

格式。

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

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

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

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

1 将CSS应用于div和class [重复]

这个问题已经在这里有了答案: CSS选择器中的空格是什么意思? 即.classA.classB和.classA .classB有什么区别? 4个答案 如何为给定代码放置外部CSS,因为它是带有class的div : 是吗 要么 还是有另一 ...

3 NgIf 性能问题应用于 div 而不是 ng-container

我正在编写一个应用程序,在当前状态下,它不是很大。 它在性能上没有任何问题,但我注意到一个奇怪的行为。 我有三个组成部分: map.component有一个方法通知dashboard.component使用Subject来改变布尔变量的状态(默认值设置为false): 此变量的状态以这种方 ...

2020-02-11 09:59:32 1 52   angular
5 这是IE错误吗? `body.foo.bar .container`应用于每个body元素

我有几页和一个样式表。 页面正文分为两类:它们的名称和语言。 例如: 现在,在样式表中,我对“专家”页面的德语版有一条特殊规定: 在IE 6、7 和8中 ,这种样式不仅会持续应用于 但是每一页的每一个身体元素 。 当我删除“身体”: 它按预期工作,仅适用 ...

6 Bootstrap 3 - 应用于 div-body 的 4 列的相同高度

关于对齐所有网格列的高度,我浏览了所有其他相关的 BS3 帖子,但这似乎对我的特定场景没有帮助。 问题: 我正在为一个项目运行 BS 3,并且有 1x 行和 4x 卡 div。 每个卡片 div 都有一个正文和页脚,其中正文中的文本量因每张卡片而异,但都有相同的页脚。 我想要实现的是将所有列的正 ...

9 将HTML画布应用于div

我正在尝试将画布应用于特定的div 我已经在一个实验中进行了这些操作,但是我尝试在另一个实验中进行操作,而我使用的解决方案却行不通。 这是一个无效的链接: http : //alejuu.com/demo/demo/Tearable-Cloth-master/ 在其他实验中可用的 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM