Bootstrap .container和.container-sm的区别

Question

Bootstrap 4.4中引入的Bootstrap .container CSS类和.container-sm CSS类有什么不同？

在https://getbootstrap.com/docs/4.4/layout/overview/#containers部分中包含的对照表中似乎没有区别。我也看不出Bootstrap文档中包含的Grid example有什么不同。

Answer 1

通常，.container和.container-sm类之间没有区别。

您可以在dist/css/bootstrap.css文件中查看它，其中包含以下代码(我对其进行了一些简化)：

.container-fluid, .container, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width:  576px) { .container, .container-sm                                              { max-width:  540px; } }
@media (min-width:  768px) { .container, .container-sm, .container-md                               { max-width:  720px; } }
@media (min-width:  992px) { .container, .container-sm, .container-md, .container-lg                { max-width:  960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }

我在dist/css/bootstrap.css中发现的唯一细微差别是代码：

@media print { 
  .container { min-width: 992px !important; } 
}

它为.container类定义CSS属性，但不为.container-sm类定义CSS属性。我不确定这种细微的差异是否是故意的。