Haml::SyntaxError - 非法嵌套：内容不能与 %a 在同一行给出并嵌套在其中答案

【问题标题】：Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within itHaml::SyntaxError - 非法嵌套：内容不能与 %a 在同一行给出并嵌套在其中
【发布时间】：2012-04-29 11:35:56
【问题描述】：

我正在使用带有 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 不允许这样做。我该如何解决这个问题？

【问题讨论】：

嗯，对 HAML 了解不多（实际上一点也不了解），但从您的标记来看，我相信您正在尝试将 a 标记嵌套在 ul 标记内而不是在li 标签，是这样吗？
不，如果我评论 'span' 行，一切正常
尝试使用 <b> 粗体标签替换跨度标签，每个引导标记。

标签： haml twitter-bootstrap

【解决方案1】：

问题出在以下几行：

%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>

【讨论】：

【解决方案2】：

别忘了你的 Haml 习语！

#div{:class => 'btn-group task_controller'}

相当于：

.btn-group.task_controller

……等等

【讨论】：

【解决方案3】：

试试这个：

%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

只有在标签中没有更多内容行时，标签名称和内容才能在同一行。

【讨论】：