为何Bootstrap媒体查询中min-width大于max-width？

我正在学习网页设计相关内容以提升能力，距离从头搭建页面已有很长时间，目前存在学习曲线。在Dreamweaver中看到预制的Bootstrap代码里，媒体查询的min-width值总是大于对应的.container的max-width值，相关代码如下：

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

解答 #

这是Bootstrap为给页面保留**左右留白（padding/gutter）**设计的核心逻辑：

• 媒体查询的min-width对应浏览器视口的断点宽度，.container的max-width是容器本身的最大宽度，两者的差值就是预留给页面两侧的留白空间，避免内容直接紧贴浏览器边缘，提升视觉舒适度。
• 比如视口宽度≥576px时，容器最大宽度设为540px，剩下的36px会被平均分配到容器左右两侧作为内边距。
• 这种设计能保证不同断点下，栅格列的间距（gutter）和页面留白保持一致的视觉节奏，让响应式布局更协调统一。

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