我正在使用带有 HAML 的 Twitter Bootstrap 中的“按钮下拉菜单”。在 Bootstrap 文档中,我找到了示例:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
我尝试使用 HAML 重写它:
%div{:class => 'btn-group task_controller'}
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
%span{:class => 'caret'}
%ul{:class => 'dropdown-menu'}
%a{:class => 'close_task', :name => task.name, :href => '#' } Close
但收到错误消息:
Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within it.
所以 Bootstrap 说我把元素放在 -tag 里面,但是 HAML 不允许这样做。我该如何解决这个问题?
最佳答案
问题出在以下几行:
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
%span{:class => 'caret'}
错误信息:
content can't be both given on the same line as %a and nested within it
指Action
这是“与 %a 在同一行”的内容,以及 %span{:class => 'caret'}
,这是“嵌套在其中”的内容。更一般地说,也许更容易看到,你不能有这样的东西:
%tag Some content here
And something here as well
解决方法是将两者都嵌套在
%a
下。 :%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'}
Action
%span{:class => 'caret'}
这给出了所需的输出:
<a class='btn-mini dropdown-toggle' data-toggle='dropdown' href='#'>
Action
<span class='caret'></span>
</a>
关于Haml::SyntaxError - 非法嵌套:内容不能与 %a 在同一行给出并嵌套在其中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10202931/