HTML/CSS [Bootstrap 神坑] 叫这个名字真的是给您添麻烦了

bydmm · 2014年02月24日 · 最后由 eruditius 回复于 2014年05月25日 · 7096 次阅读

今天做一个类似这样的东西的时候遇到一个 Bootstrap 的坑。 其中 Spanish 和 Spanish(Latin American) 这两个国旗就是不呆在他应该在的位置。 我改来改去,调整 Dom 结构,检查 CSS 细节,都没看到具体的问题。 唯一发现的是只要这个旗子的 class 叫 spanish, spanish-Latin-American 就一定有问题。 本着 HTML 语义化的执着, 我也不愿意草草的把 Class 名字改了了事, 而想探寻一下到底有什么问题。 说不定能发现一个 chrome 的坑, 提交到开发组也光宗耀祖一下。 后来发现居然每个游览器都有问题。 于是我回过头来看看 CSS 里到底出了什么事情。 后来发现了以下代码

#bootstrap.css?body=1:179
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}

Spanish 君, Spanish(Latin American) 君: Orz........叫这个名字真的是给您添麻烦了。

这可以叫保留关键字吗。XD

大小写命敏感吗?

确实有点坑。不过看到这个图,第一反应是应该用 id with namespace,或者是 data attributes。而直接用国别名做 class 的话 name collision 的机会太大了,移植性低。

bootstrap3 里面不是都是 col-* 这样的了么

@fresh_fish 原来是 Bootstrap 2 的 span class ,不然提交一个 PR 到 Bootstrap ,一样可以光宗耀祖。

LZ 一定是北方人,罗威是哪个国家?

这个是你自己的错吧,Spanish 的类名应该是 es 什么的才对啊

今天又掉进同一个坑。 class="video_search_spanish_eq"

被楼主的细心幽默还有机智震住了。我知道楼主在光谷。。踏踏踏路过。

编码问题?希望其他专业程序员的看法?

www.eruditius.com

Eruditius - 编程问答 - 各级 WWW.ERUDITIUS.COM 问答网站程序员和网站开发人员在各级

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册