为什么未设置container类的div表现类似容器，内容随视口缩小？

为什么无container类的div内容也会随视口缩小 #

普通<div>本身就是块级元素，默认宽度为父元素宽度的100%，在你没有给它设置固定宽度的前提下，它的宽度会跟随父元素（最终继承到视口宽度）自动缩放，内部文本会自动换行，所以你调整视口大小时内容自然会随之收缩，这个特性和是否引入Bootstrap无关，是HTML的原生表现。
另外Bootstrap 4的全局样式中也默认做了以下适配，强化了这个表现：

• 默认给html、body设置了宽度100%，无默认边距挤占宽度
• 默认给全局文本设置了自动换行规则，避免内容溢出撑宽容器

container类div和普通div的布局差异 #

Bootstrap的container类是为了实现响应式固定宽度、居中布局设计的，和普通div的核心差异如下：

• 普通无样式div：始终占满父容器100%宽度，不会自动居中，左右没有预留的响应式内边距
• .container类：在不同断点下有固定的最大宽度，会自动水平居中，左右自带15px的内边距，避免内容贴紧视口边缘
• 额外补充.container-fluid类：始终占满100%视口宽度，但左右自带15px内边距，不会让内容贴边

直观对比示例代码 #

你可以运行以下代码，调整视口大小观察差异：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap container对比</title>
  <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">
  <style>
    /* 加边框方便区分容器 */
    .box {
      border: 2px solid red;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!-- 普通div -->
  <div class="box">
    <h3>普通div</h3>
    <p>内容始终贴紧视口左右边缘，宽度永远100%视口宽度</p>
  </div>

  <!-- 带container类的div -->
  <div class="container box">
    <h3>.container类div</h3>
    <p>不同断点下有固定最大宽度，自动居中，左右始终有留白</p>
  </div>

  <!-- 带container-fluid类的div -->
  <div class="container-fluid box">
    <h3>.container-fluid类div</h3>
    <p>宽度始终100%视口，但左右有15px内边距，不会贴边</p>
  </div>
</body>
</html>

不同断点下.container的固定宽度参考 #

• 小于576px的超小屏：宽度100%，和普通div表现一致
• 576px~767px：最大宽度540px
• 768px~991px：最大宽度720px
• 992px~1199px：最大宽度960px
• 大于等于1200px：最大宽度1140px

内容的提问来源于stack exchange，提问作者billi