Question

在构建我的页面时，我通常使用以下方法来嵌套带有引导程序的元素。

<section class="container">
<aside class="row">
    <article class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></article>
    <article class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></article>
    <article class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></article>
</aside>
</section>

但是当我从其他HTML主题提供商处购买主题时，我会在他们的代码中看到它们就像这样使用它。

<section class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
</section>

请有人告诉我嵌套它们的正确方法是什么，哪个标签应该在哪个元素内，或者如果你可以将我推荐给在线指南。

Answer 1

Here是对语义标签的讨论以及在何处使用它们的链接。滥用不会导致输出错误或更改，但会降低您的代码的可读性。将Bootstrap添加到等式中并没有什么区别。

Answer 2

<section class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
 </div>
</section>

上面的代码是嵌套代码的正确示例。在任何UI中，Container都包含在行下定义的行和列。

以嵌套的方式使用正确的HTML5结构，并在彼此之间采用正确的标签

2 个答案: