使用 HTML5 元素嵌套引导 div [关闭]答案

【问题标题】：Bootstrap div nesting with HTML5 elements [closed]使用 HTML5 元素嵌套引导 div [关闭]
【发布时间】：2016-10-06 16:16:46
【问题描述】：

使用引导框架时，内容被放置在容器、行和列中。我的问题涉及如何将引导 div / 容器模型与 HTML5 元素混合，例如：

<header> 
<main>
<footer>

根据我对使用 Bootstrap 内容的理解，似乎是这样布置的：

<div class="container">
    <div class="row">

与后续：

<div class="col-*-*">

创建您的网格/布局。

我的问题是您是否应该在 Bootstrap 使用的容器/行设置的外部或内部使用类/ID 包装 HTML5 元素或 DIV，如下所示：

<div class="header">
    <div class="container">
        <div class="row">

或者：

<div class="container">
    <div class="header">
        <div class="row">

最后：

<div class="container">
    <div class="row">
        <div class="header">

是否有使用 Bootstrap 使用类/ID（例如页眉、页脚等）对 HTML5 元素或 DIV 进行排序的最佳做法？

PS：我知道我在代码示例中使用了所有 div 标签而不是 HTML5 元素。我只是认为这有助于说明我的要求。

【问题讨论】：

你需要的所有引导语义都在这里getbootstrap.com/css

标签： css html twitter-bootstrap grid

【解决方案1】：

Bootstrap 网格系统基于不限于任何特定元素的类。您可以将 div 用作行或列，也可以使用任何其他 HTML 元素。如果我正确理解您希望使用 HTML5 元素，即向搜索引擎、屏幕阅读器等提供有价值的信息，您基本上可以这样做：

<div class="container">
    <header class="row">
        <main class="col-md-6"></main>
        <aside class="col-md-6"></aside>
    </header>
</div>

等等。

标题元素现在用作一行，然后可以使用元素标签对其进行样式设置。

（未针对所有不同浏览器和设备中的错误/故障进行测试），Bootstrap 的示例基于全 div 布局。

【讨论】：

【解决方案2】：

我认为最好的解释是这样的：

<div class="container">
    <div class="row">
        <div class="header">

容器有点像圣诞节给你的盒子上的包装纸（当然，如果你庆祝圣诞节）。该行仍在容器内，但它进一步缩小了您的内容范围（因此在类比中：它不是内容，但它不是包装纸，所以它是盒子）。实际内容可能会使用<header>、<main> 或<footer> 之类的内容，因此由于实际内容在<header> 标记中，它会浮在顶部，因此结束我们的类比，@ 987654326@是真正的礼物本身，在盒子里面，盒子本身被包装纸包围。

我希望这会有所帮助，而且我知道离 12 月还很远。对我来说，上面的顺序和推理是最有意义的（有时“包装纸”和“不完全包装纸”可能会混淆一些 XD）。

【讨论】：