Разница между Bootstrap .container и .container-sm

Question

В чем разница между классом Bootstrap .container CSS и классом .container-sm CSS, представленным в Bootstrap 4.4?

Кажется, что в таблице сравнения нет различий в разделе https://getbootstrap.com/docs/4.4/layout/overview/#containers. Я также не вижу различий в примере Grid , включенном в документацию Bootstrap.

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; } 
}

, который определяет свойство CSS для класса .container, но не для .container-sm класс. Я не уверен, предназначено ли это незначительное различие или нет.