1

以下のhtmlをhamlで書きたいと思ってます。

html:

<div class="row">
  <div class="col-sm-9">
    あいうえお
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        あいうえお
      </div>
      <div class="col-xs-4 col-sm-6">
        あいうえお
      </div>
    </div>
  </div>
</div>

haml:

.row
  .col-sm-9 あいうえお
    .row
      .col-xs-8.col-sm-6 あいうえお
      .col-xs-4.col-sm-6 あいうえお

しかし、このようにhamlで書くとエラーが発生してしまいます。

Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %div and nested within it.

上記のようなhtmlにしたい場合、どうhamlを修正すればよろしいでしょうか?

1 件の回答 1

4
  .col-sm-9 あいうえお
    .row

タグの中身は「タグのすぐ後ろ」か「より深いインデント」のどちらかに書く必要があり、併用はできません。エラーメッセージで言うところの on the same line as %divあいうえおnested within it.row に対応しています。

この場合、両方ともインデントして記載すればいいでしょう。

  .col-sm-9
    あいうえお
    .row

http://codepen.io/anon/pen/VLKgVg

<div class='row'>
  <div class='col-sm-9'>
    あいうえお
    <div class='row'>
      <div class='col-xs-8 col-sm-6'>あいうえお</div>
      <div class='col-xs-4 col-sm-6'>あいうえお</div>
    </div>
  </div>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。