非法嵌套：内容不能与 %div 位于同一行并嵌套在其中答案

【问题标题】：Illegal nesting: content can't be both given on the same line as %div and nested within it非法嵌套：内容不能与 %div 位于同一行并嵌套在其中
【发布时间】：2017-12-27 15:47:59
【问题描述】：

所以我正在使用 Cloud 9 编辑器制作类似 Instagram 的页面。模板是 ruby on rails，但我也在为这个文件使用 HAML。一旦我运行我的应用程序，我会收到一个错误：非法嵌套：内容不能与 %div 在同一行中给出并嵌套在其中。在那之前是一个错误，说缩进不正确。一个问题是我应该使用制表符还是空格？我的第二个问题是如何解决这个问题“非法嵌套：内容不能与 %div 位于同一行并嵌套在其中”？错误在第 16 行：.collapse.navbar-collapse#bs-navbar-collapse-1 提前致谢！

下面是我的 application.html.haml：

%html
 %head
  %title Photogram
  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  = csrf_meta_tags
 %body
  %nav.navbar.navbar-default
  .navbar-container
  .navbar-header
  %button.navbar-toggle.collapsed{"data-target" => "#bs-navbar-collapse-1", "data-toggle" => "collapse", type: "button"}
  %span.sr-only Toggle Navigation
  %span.icon-bar
  %span.icon-bar
  .navbar-brand= link_to "Photogram", root_path
      .collapse.navbar-collapse#bs-navbar-collapse-1
      %ul.nav.navbar-nav.navbar-right
      %li
        = link_to "New Post", new_post_path
      %li
        = link_to "Login", '#'
      %li
        = link_to "Register", '#'

    .container
    = yield

【问题讨论】：

错误在哪一行？
@CherryPlaysRoblox 哦，谢谢提醒，我已编辑。在第 16 行 .collapse.navbar-collapse#bs-navbar-collapse-1

标签： ruby-on-rails haml

【解决方案1】：

这是因为你有一个link_to，然后你在里面嵌套。检查this answer here 并尝试更改您的代码。另外，如果您正在学习教程，请检查他们的代码，看看他们是否也出现错误。

【讨论】：

@iiRosie1 不能在同一行和里面给出内容。该错误还解释了您做错了什么。

【解决方案2】：

解决方案 我所做的是压痕不正确。所以我回去检查每个缩进是否是它应该的样子。现在代码如下所示：

%html
%head
  %title Photogram
  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  = csrf_meta_tags
%body
  %nav.navbar.navbar-default
    .navbar-container
      .navbar-header
        %button.navbar-toggle.collapsed{"data-target" => "#bs-navbar-collapse-1", "data-toggle" => "collapse", type: "button"}
          %span.sr-only Toggle Navigation
          %span.icon-bar
          %span.icon-bar
        .navbar-brand= link_to "Photogram", root_path
      .collapse.navbar-collapse#bs-navbar-collapse-1
        %ul.nav.navbar-nav.navbar-right
          %li
            = link_to "New Post", new_post_path
          %li
            = link_to "Login", '#'
          %li
            = link_to "Register", '#'

  .container
    = yield

【讨论】：