为什么bootstrap的'容器'类不是全宽的？

Question

默认情况下，

container将内容放在中间（边上有边距），而不是填满整个屏幕。

这背后的理由是什么？

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

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

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

Answer 1

这是一个问题，为什么，按设计，container没有填写entre屏幕？

虽然我无法声称我确切知道，但我可以想象这是一个基于这样一个事实的决定，即您很少希望您的内容直接在屏幕边缘开始。我还可以想象很多人更喜欢做一些静态布局而不是完全流畅的设计，更不用说基于百分比宽度设计一些布局非常具有挑战性。

您可以显而易见地使用max-width: 100%并将padding应用于container。就个人而言，这是我的首选方法。

这里没有最佳实践，更好的方法很大程度上取决于所讨论的布局。

Answer 2

您还可以使用容器 - 流体类，它使所有百分比都基于。因此，不是容器具有固定宽度并且在页面上居中，而是容器宽度等于视口的100％。