bootstrap 4 的 container 类本身不会产生任何视觉元素，页面中出现的“奇怪圆点”实为开发者自定义 css（如 container::after 伪元素）意外触发所致，需检查并移除冗余伪元素样式。
bootstrap 4 的 container 类本身不会产生任何视觉元素，页面中出现的“奇怪圆点”实为开发者自定义 css（如 container::after 伪元素）意外触发所致，需检查并移除冗余伪元素样式。
在使用 Bootstrap 4 构建响应式布局时，.container 是最基础的居中容器类，其作用仅为设置最大宽度和水平居中（通过 margin: 0 auto），完全不包含任何内容、边框、背景或伪元素。因此，当页面中出现异常的圆点（如您截图中左侧时间线旁的黑色小圆点），问题必然源于自定义 CSS 的干扰。
经核查您的 styles.css#L613，定位到如下代码：
.container::after {
content: "•";
display: inline-block;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
margin-right: 8px;
}该规则为所有 .container 元素添加了 ::after 伪元素，并渲染一个黑色实心圆点——这正是页面中“奇怪圆点”的直接来源。
⚠️ 关键注意事项：
- 伪元素（::before / ::after）必须配合 content 属性才能渲染；若仅设置 display、background 等而遗漏 content，则不会生效；
- 此处 content: "•" 是文本内容，但更推荐使用纯 CSS 绘制（如 content: "" + background-color + border-radius），语义更清晰且避免字体兼容性问题；
- *切勿将具有视觉副作用的伪元素绑定到通用布局类（如 .container, .row, `.col-`）上**——它们应专用于结构容器，而非装饰元素。
✅ 正确修复方式：
- 删除 styles.css 中第 613 行附近的 .container::after 规则；
- 若需在时间线等特定场景绘制圆点，请改用语义化、作用域受限的选择器，例如：
<!-- HTML --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content">项目详情...</div> </div>
/* CSS：仅作用于 timeline-dot */
.timeline-dot {
display: inline-block;
width: 10px;
height: 10px;
background: #28a745;
border-radius: 50%;
margin-right: 12px;
vertical-align: middle;
}这样既保持了视觉效果，又避免污染全局布局类，符合 CSS 关注点分离原则。
? 总结：Bootstrap 的工具类（如 .container）是纯粹的布局载体，不应承担装饰职责。任何异常视觉表现，优先排查开发者自定义样式对通用类的误用。养成「语义化命名 + 局部作用域」的 CSS 编写习惯，可大幅提升可维护性与调试效率。
