Bootstrap 4中container容器居中对齐设置不生效问题求助

核心原因 #

• Bootstrap 原生.container类默认已经内置margin-left: auto; margin-right: auto;水平居中逻辑，正常加载Bootstrap CSS的情况下不需要额外写居中代码。
• 你添加居中代码后刷新无效果，90%的概率是本地Bootstrap CSS文件引入路径错误，浏览器没有成功加载到Bootstrap样式文件，所有框架自带的布局规则都未生效。你当前写的引入路径是node_modules/bootstrap/dist/css/bootstrap.min.css，如果HTML文件不在项目根目录、或者npm依赖安装路径异常，都会导致CSS加载404。
• 剩余10%的概率是你混淆了两种居中逻辑：给块级元素自身加水平居中需要设置左右margin为auto，如果是想让容器内部的文本、行内元素居中，需要设置text-align: center，两种写法不能混用。

修复步骤 #

• 先验证CSS加载状态：按F12打开浏览器开发者工具，切换到「网络」面板刷新页面，找到bootstrap.min.css请求，确认状态码为200。如果是404，直接修正CSS引入路径即可。
• 如果暂时不想排查本地路径问题，可以直接在页面head标签内添加如下内置样式，直接给container加上居中规则，不需要依赖Bootstrap文件：

.container {
  width: 100%;
  max-width: 1140px; /* 大屏下容器最大宽度，可自行调整 */
  padding: 0 15px;
  margin: 0 auto; /* 水平居中核心代码 */
}

• 如果是要实现容器内文本居中，直接给container标签加class="container text-center"即可，这是Bootstrap内置的文本居中类。

注意：自定义的CSS样式必须写在Bootstrap CSS引入语句的后面，否则会被框架默认样式覆盖，导致修改不生效。

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