哈姆打破。非法嵌套：内容不能在同一行上给出

Question

我仍然不清楚为什么会这样做：

.form-box
      %h3 Restrictions
      %legend Restricted Locations
        = form_for [:blueadmin, :wine, @wine], html: {class: 'form-horizontal col-lg-2'} do |f|
          %fieldset.inputs
            .control-group
              = f.label :us_states, "US States", class: 'control-label'
              .controls
                = f.collection_select :product, Restriction.all, :us_state, :us_state, {}, :multiple => 'true'
          %fieldset
            %ol
              %li.button
                = f.submit "Submit", class: 'btn btn-primary'
      %table.table.table-hover.table-condensed.story-list
        %th State
        %th Remove

我得到的错误是： Illegal nesting: content can't be both given on the same line as %legend and nested within it.

= form_for似乎是罪魁祸首

我了解受限制的位置与％图例在同一行...但这就是我看到文档的方式。

这虽然有效，但它搞砸了我的传奇边界：

  .form-box
      %h3 Restrictions
      %legend
        Restricted Locations
        = form_for [:blueadmin, :wine, @wine], html: {class: 'form-horizontal col-lg-2'} do |f|
          %fieldset.inputs
            .control-group
              = f.label :us_states, "US States", class: 'control-label'
              .controls
                = f.collection_select :product, Restriction.all, :us_state, :us_state, {}, :multiple => 'true'
          %fieldset
            %ol
              %li.button
                = f.submit "Submit", class: 'btn btn-primary'
    %table.table.table-hover.table-condensed.story-list
      %th State
      %th Remove

看起来像这样：

而不是这个：

（注意细线在不同的位置）

最后，如何让底部的表格显示在表单的右侧而不是下方？如何使用列来执行此操作？

Answer 1

您的表单嵌套在图例元素中。

 .form-box
  %h3 Restrictions
  %legend
    Restricted Locations
  = form_for [:blueadmin, :wine, @wine], html: {class: 'form-horizontal col-lg-2'} do |f|
    %fieldset.inputs
      .control-group
        = f.label :us_states, "US States", class: 'control-label'
        .controls
          = f.collection_select :product, Restriction.all, :us_state, :us_state, {}, :multiple => 'true'
    %fieldset
      %ol
        %li.button
          = f.submit "Submit", class: 'btn btn-primary'
%table.table.table-hover.table-condensed.story-list
  %th State
  %th Remove

Answer 2

您需要将表单移出%legend代码。

将代码更改为：

.form-box
  %h3 Restrictions
  %legend 
    Restricted Locations
  = form_for [:blueadmin, :wine, @wine], html: {class: 'form-horizontal col-lg-2'} do |f|
    %fieldset.inputs
      .control-group
        = f.label :us_states, "US States", class: 'control-label'
        .controls
          = f.collection_select :product, Restriction.all, :us_state, :us_state, {}, :multiple => 'true'
    %fieldset
      %ol
        %li.button
          = f.submit "Submit", class: 'btn btn-primary'
  %table.table.table-hover.table-condensed.story-list
    %th State
    %th Remove

仅当您要嵌套单个元素时才使用内联内容。在您的情况下，您尝试嵌套Restricted Locations文本以及form

注意： HAML适用于缩进，因此缩进的任何更改都会导致不同的html代码或语法错误