新手问题 [已解决] twitter bootstrap 与 slim 搭配时遇到的一个问题

xiaoronglv · 2014年07月10日 · 最后由 luikore 回复于 2014年07月10日 · 3213 次阅读

Slim 代码

p
  - post.tags.each do |tag|
    span.label.label-default
      = tag.name
    / |     不想加这一行,太丑了

Bug

因为 span 之间没有换行,所以 label 都挤在了一起。

换行后,问题解决

问题

slim 代码怎么写,才能让它达到图二的效果?

span.label.label-primary = topic.comments.count
|   
span.label.label-success = topic.admires.count
|   
a href=admin_topic_path(topic)
  = topic.body.truncate(50)
|   


代码里一坨坨的空格,看着真心难受

初学强烈不建议用 slim,真心感觉代码没快多少。个人感觉。

在线 html 转 slim http://html2slim.herokuapp.com/

slim 默认将所有模板中的空格都去掉了,你可以通过设置来关闭这个选项: Slim::Engine.set_default_options pretty: true 或者是修改 span 的 css,添加 margin

- if post.deleted?
      span.label.label-default>< = post.comment_count.value

试试这样

非常感谢 两位 @quakewang @hisea ,问题解决了。

请问 @hisea , >< 这个符号是什么意思啊?我没有找到相关文档。

<在 tag 前面加个空格,>在 tag 后面加个空格,也能单用,也能<>,

就是 ><看着搞笑点

应该这样写

p
  - post.tags.each do |tag|
    span.label.label-default
      = tag.name
      '
      | Something else

'是在行尾加了空格,相当于多写了一行带一个空格的单行。

比较之后发现 js 的 jade 没有这个功能,所以写起来很痛苦

Slim 文档查找这一行:

Trailing and leading whitespace (<, >)

楼主要加空格干什么,这个是百分之百是 CSS 的职责。Markup 里面要避免这些无意义的东西。

这些 tag 明显和前面的链接是不同的类别,你给它们另加一个 class 比如 label-tag, 然后.label-tag: {margin-right: 10px}就可以了。

#9 楼 @billy 或者写个伪类,在 content 里面给个空格,更显逼格一些。。。

@nightire 用合适的技术做合适的事情就行了。

用了这么久 slim,都没碰到这个问题。学习了。

#7 楼 那样就好

p
  - post.tags.each do |tag|
    span.label.label-default
      = tag.name
      '

给 span 设 margin 属性经常是达不到想要的效果的,还要考虑各浏览器的不同行为...

默认消除全部空格绝对是比有空格省事得多

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