为什么 div 元素表现得像一个容器？答案

【问题标题】：why is div element behaving like a container?为什么 div 元素表现得像一个容器？
【发布时间】：2021-10-14 16:42:03
【问题描述】：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div>
  <h1>Hello World</p>
    <p>This is the content of the p element. It shrinks when I shrink the viewport</p>
</div>

为什么即使它没有 container 类，调整视口大小时内容也会缩小？（任何证明 div 具有容器类和非容器 div 之间差异的示例将不胜感激）

【问题讨论】：

不只是Bootstrap会为你的容器调整大小，如果它是一个容器，如果它不是一个引导容器，你手动调整它的大小吗？内容会缩小，因为 div 是一个容器，而不是引导管理的容器。不过，希望您能得到其他答案，因为我几乎没有使用过引导程序。
这就是 div 元素默认的行为方式。

标签： html css bootstrap-4 containers

【解决方案1】：

默认情况下，div 具有 100% 的宽度，因此如果调整大小（如果 div 是 body 或始终填充视口宽度的任何其他元素的直接子元素），它将随视口缩小.

Bootstrap 具有某些类，但如果没有使用这些类，则 div 的行为仍必须像“常规”div（即任何不使用 bootstrap 的 div）

【讨论】：

我刚刚尝试并指定了外部 div 的宽度并制作了一个内部 div，它没有调整大小。到现在为止还挺好。但即使我将包含类添加到 div，它甚至不会缩小？
一旦你添加了一个特定的宽度（像 px 这样的固定单位），div 就不会再缩小或增长了（因为你将宽度设置为一个固定值）。

【解决方案2】：

尝试使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 HTML 文件的头部部分

【讨论】：