帝国CMS面包屑导航错位修复 新手也能快速搞定的实用方法

你有没有遇见过这种糟心事儿？用帝国CMS做的网站，明明首页好好的，一点进列表页、内容页，面包屑导航直接歪了，要么挤成一团，要么直接掉下来变成两行，丑得没法看。客户找过来问你怎么回事，还以为你技术拉胯，其实真不是啥大问题，大多就是改模板的时候碰出来的小错，我前两个月刚帮三个客户修过这个问题，今天把实打实的干货给你。

先排查是不是模板调用出了低级错误

先对着面包屑代码核对一遍

很多人用帝国CMS都是直接套网上找的免费模板，改的时候只改了文字，面包屑这块随手复制粘贴，class名都能写错。本来CSS对应是.breadcrumb，结果你写成breadcrumbs或者拼错字母，样式对不上，能不歪吗？

还有更坑的，改代码的时候多删了一个闭合标签，或者多添了一层div，把整个面包屑容器的宽度给撑乱了，自然就错位了。

要是你刚改完模板就出了这个问题，别瞎折腾别的，先打开模板文件找面包屑那块，对一遍代码和标签，分分钟就能找到问题，我之前碰见过一个小伙伴，少写了一个闭合div，找了一下午，结果就这么点事儿。

九成以上的错位都是CSS样式的问题

先看容器宽度够不够

面包屑一般都放在页面顶部通栏，本来地方就不大，你改了logo宽度、调了导航栏尺寸之后，留给面包屑的空间就变小了，内容挤不下可不就掉下来吗？

教你个一秒排查的方法，打开浏览器按F12调出开发者工具，直接点那个错位的面包屑，一看盒模型的宽度，超没超一目了然。

两个常用调法，大部分问题都能解决

要是只是超了一点点，直接给面包屑容器加一行代码，让它强制不换行，多余的部分隐藏就行，代码我给你写好了：

``` .breadcrumb { overflow: hidden; white-space: nowrap; width: 100%; } ```

亲测这个方法能搞定九成以上的轻微错位，好用不踩坑。

要是因为链接间距太大、字体太大挤错位，那就直接调链接的样式，把间距缩小点字体改小一点，代码放这：

``` .breadcrumb a { padding: 0 6px !important; font-size: 14px; } ```

别忘了加!important，很多时候你改的CSS被模板原来权重更高的样式顶掉了，加这个就能强制生效。

还有一种情况，用了浮动布局的面包屑，忘记给容器清浮动，元素都乱跑能不错位吗？就像排队买奶茶，有人乱插队，后面的队伍自然歪了，给容器加一行clear: both;，大家就都归位了。

还有个很少见但特别坑的问题：编码乱码撑宽

我之前碰过一回，找了快一小时才发现问题在哪。面包屑的分隔符用了特殊符号，比如»、›这种，模板保存的时候编码不对，直接变成了乱码，一个乱码顶正常两个符号宽，直接把整个面包屑给撑错位了。

解决方法也简单，把直接写的特殊符号换成HTML实体符号就完事儿，比如要分隔符用大于号，就写>，不要直接输入符号，就不会出乱码的问题了。

其实这事儿吧，帝国CMS面包屑错位真不是什么程序bug，就是改模板改出来的小问题，按我说的顺一遍，三五分钟肯定能搞定，别对着错位的页面瞎挠头了，赶紧去试试吧。