HTML页脚文本居中、引入Bootstrap影响下拉菜单样式问题求助

问题1：footer文本默认居中修复方案 #

• 排查步骤：打开浏览器开发者工具（按F12），选中footer内的文本元素，查看「计算样式」面板的text-align属性，直接定位生效样式的来源。
• 常见触发原因：
  • 全局样式或CSS重置文件给footer标签预设了text-align: center规则
  • footer的父级容器（如body、外层包裹容器）设置了全局居中规则，样式继承到footer
  • 部分浏览器的默认用户代理样式对footer有特殊对齐规则
• 修复代码：给footer单独指定对齐规则，可根据需求调整对齐方向：

/* 可替换left为right/justify匹配你的需求 */
body footer {
  text-align: left;
}

如果规则仍不生效，可临时加!important验证是否是优先级问题，确认生效后建议通过提升选择器权重（比如加父类前缀）替代!important方便后续维护。

问题2：引入Bootstrap后自定义下拉菜单样式被覆盖修复方案 #

Bootstrap自带下拉组件的默认样式优先级高于自定义样式，是该问题的核心原因，可按以下优先级选择解决方案：

• 调整样式引入顺序：将自定义CSS的<link>标签放到Bootstrap样式链接的后面，同优先级样式后加载的会覆盖先加载的规则，是成本最低的修复方案。
• 提升自定义样式的选择器优先级：在你的下拉菜单选择器前加自定义父类前缀，比如你的导航外层有自定义类.custom-nav，就将原.dropdown-menu选择器改为.custom-nav .dropdown-menu，优先级高于Bootstrap的单类选择器，不会污染全局样式。
• 避重名方案：如果不需要使用Bootstrap的下拉组件功能，直接给你的下拉菜单换不和Bootstrap重名的自定义类名（比如不用.dropdown改用.my-dropdown），完全避开样式冲突。
• 单属性临时覆盖：仅需修改个别属性时，可给对应属性加!important，不建议大量使用避免后续样式维护混乱。

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