bootstrap 4 的 container 类本身不会产生任何可见圆点；问题根源在于自定义 css 中对 .container::after 伪元素的误用，该声明意外触发了非预期的视觉元素（如圆点），需定位并移除或重置该伪元素样式。
bootstrap 4 的 container 类本身不会产生任何可见圆点；问题根源在于自定义 css 中对 .container::after 伪元素的误用，该声明意外触发了非预期的视觉元素（如圆点），需定位并移除或重置该伪元素样式。
在使用 Bootstrap 4 构建响应式布局时，container 类是实现居中、自适应宽度内容区块的核心工具。然而，部分开发者会发现页面中出现无法解释的“小圆点”（如时间线旁、容器边缘等位置），尤其在 Chrome 或 Firefox 中清晰可见——这并非 Bootstrap 框架行为，而是项目自有样式与伪元素冲突所致。
根据实际案例分析（如 nilutpolkashyap.github.io 网站），问题代码位于自定义 CSS 文件的第 613 行附近：
.container::after {
content: "•"; /* 或类似：content: "○"; / content: "●"; */
display: inline-block;
font-size: 18px;
margin-left: 8px;
}该规则为所有 .container 元素无差别添加了 ::after 伪元素，且设置了可见字符（如 •）作为 content 值。由于 ::after 默认以 inline 方式渲染，且未限制作用范围，它会出现在每个 .container 元素末尾（常表现为右上角或行尾的小圆点），严重干扰布局语义与视觉一致性。
✅ 正确解决方案如下：
- 精准定位并删除/注释该伪元素规则：打开你的 styles.css（或其他自定义样式表），搜索 .container::after，确认其用途。若该样式本意是为「时间线组件」服务，绝不应绑定到通用类 .container 上。
- 重构为语义化、作用域明确的选择器：例如，将样式迁移至专用类：
/* ✅ 推荐：仅作用于时间线项 */
.timeline-item::after {
content: "•";
display: inline-block;
font-size: 1.1rem;
margin-left: 0.5rem;
color: #007bff;
}
/* ❌ 禁止：污染全局容器类 */
/* .container::after { ... } */- 防御性重置（可选）：若无法立即修改源样式，可在 Bootstrap 加载后添加覆盖规则：
.container::before,
.container::after {
content: none !important;
display: none !important;
}⚠️ 注意事项：
- ::before 和 ::after 是强大的装饰工具，但必须严格限定选择器作用域，避免与框架基础类（如 .container, .row, .col-*）耦合；
- 使用浏览器开发者工具（F12 → Elements → :hov/:act → 查看伪元素）可快速定位异常 content 来源；
- Bootstrap 4 的 .container 本身不含任何 ::before/::after 样式，所有伪元素行为均来自用户自定义 CSS。
总结：所谓“Bootstrap container 显示奇怪圆点”，本质是 CSS 作用域失控导致的样式污染。修复关键在于解耦通用布局类与特定视觉效果——让结构归结构，装饰归装饰。遵循这一原则，不仅能根除此问题，更能提升整个项目的可维护性与可扩展性。
