时间戳

首页 > 解决方案 > 在引导容器中包装多个部分的正确方法是什么？

html - 在引导容器中包装多个部分的正确方法是什么？

问题描述

例如，我的网站上有下一个结构

<div class="root">
  <section class="first"></section>
  <section class="second"></section>
  <section class="third"></section>
  <section class="fourth"></section>
</div>

而且我必须在引导容器中包装从第二到第四的部分。这样做的正确方法是什么？将每个部分包装在单独的容器中？或者创建这样的东西：

<div class="root">
  <section class="first"></section>
  <div class="container">
    <section class="second"></section>
    <section class="third"></section>
    <section class="fourth"></section>
  </div>
</div>

标签： html

解决方案

正确的方法是将需要作为子元素包装的所有部分添加到 a<div class="container">中，就像您在第二个片段中所做的那样。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="root">
  <section class="first">Hello, I am outside</section>
  <div class="container">
    <section class="second">I am inside the container</section>
    <section class="third">I am inside the container</section>
    <section class="fourth">I am inside the container</section>
  </div>
</div>

推荐阅读