如何调整Bootstrap container最大宽度并保持全设备响应性

• 覆盖默认样式适配断点
  你当前自定义的home-container类仅设置了全局最大宽度，需要和Bootstrap的响应式断点匹配，避免小屏出现容器溢出、内容贴边的问题，完整CSS如下：

/* 保留Bootstrap默认container的基础布局属性 */
.container.home-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
/* 小屏 ≥576px */
@media (min-width: 576px) {
  .container.home-container {
    max-width: 540px;
  }
}
/* 中屏 ≥768px */
@media (min-width: 768px) {
  .container.home-container {
    max-width: 720px;
  }
}
/* 大屏 ≥992px */
@media (min-width: 992px) {
  .container.home-container {
    max-width: 960px;
  }
}
/* 超大屏 ≥1200px */
@media (min-width: 1200px) {
  .container.home-container {
    max-width: 1140px;
  }
}
/* 自定义最大宽度触发阈值 */
@media (min-width: 1400px) {
  .container.home-container {
    max-width: 1476px;
  }
}

注意要保证你写的自定义CSS文件加载顺序在Bootstrap官方CSS之后，才会正常覆盖默认规则。

• 内部元素适配
  你页面中的video标签需要增加宽度限制，避免视频尺寸超出容器导致溢出，补充如下CSS即可：

.video {
  width: 100%;
  height: auto;
  display: block;
}

• 源码编译方案（可选）
  如果你是通过Sass源码编译Bootstrap，可以直接修改内置的容器宽度变量，自动生成对应响应式规则，无需额外写覆盖样式：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1476px
);

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