Bootstrap3 学习中遇到的坑

虽然bootstrap2.x都没有学好，但既然3.0正式发布了，果断切换到3重新学习啊。

结果才做到导航条就遇到坑了，这里简单谈谈遇到的3个坑。

下拉菜单的子菜单dropdown-submenu被去掉

这个很让人伤心，毕竟3级目录是很常见的，结果只能自己实现，但是毕竟比不上官方的，而且bootstrap3是移动先行，自己写的submenu难以面面俱到，在移动下展现的不是很好。

而且更让人伤心的是bootstrap3里单独为dropdown和dropup设置了caret的小icon，但以前很好看的submenu icon没了，只能自己用附带的glyphicon去定制。

icon图片变成font

原来的图片加起来才20KB，现在的fonts文件夹足有120KB，当然便捷性也是很多的，如通过font的属性来设置大小、颜色等。

但原来的图片可以当背景图，背景图的位置也很好确定，现在就坑爹了，不敢改变元素的display属性，只能用负margin来定位，很别扭。

奇葩的附加按钮输入框

在导航栏里弄了个附加按钮输入框，结果在firefox和chrome里显示还不一样，firefox显示正常，但chrome里输入框竟然独占一行，一下乱掉了。这个要改起来就伤脑筋了，因为是响应式的，媒体查询也要相应的更改，蛋碎。

另外firefox下的输入框也不是完全的正常，其small尺寸的输入框的line-height没法设置，导致整个输入框的水平抬高了，和同一行的其他元素不在一个水平上，这个bug在2011年就向mozilla报告了，现在还没fix，让人心凉，要让其正常还得hack，虽然不是很难但也难受啊。。

 

根据观察bootstrap3的很多坑都是由支持移动设备带来的，其目标是想做到同一套html/css就能同时支持pc和移动设备，不过看起来的确很难，希望bootstrap3能够尽快把这些坑都添上，另外多提供一些案例，如果有些坑不好填，至少给出官方的hack方法啊。。

转载于:https://www.cnblogs.com/pockry/p/3293022.html