Web开发入门疑问收集(不定期更新)

Posted 2020-08-23 那句诺言

bootstrap

container和container-fluid的区别

原始链接

container

根据显示设备满足的最小宽度，来决定实际内容宽度，是一个根据设置内容阶梯式响应的布局。

例子：

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

 

假如当前显示设备尺寸是1000，满足最小宽度992，所以内容的宽度是970。假如设备宽度慢慢增长，在1000到1200之间时，内容宽度不变；设备宽度到达1200时，内容宽度变为1170。

 

container-fluid

当设备宽度慢慢增长时，内容宽度会随之慢慢增长，保持填充至整个屏幕宽度。