Question

我尝试使用Zurb的Foundation Equalizer使两列高度相同。

根据基金会网站的语法：

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

如何将此翻译为haml？这可能吗？

以下是基金会网站的链接供参考：http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Answer 1

（我的答案是假设您已经知道如何使用HAML。）

您可以正常渲染类，但必须将数据属性专门用于HAML。幸运的是，我刚刚发现的HAML文档描述了如何执行此操作：http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes

HTML5 Custom Data Attributes

HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash. Each of the key/value pairs in the Hash will be transformed into a custom data attribute. For example:

%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author

will render as:

<a data-author-id='123' href='/posts'>Posts By Author</a>

阅读该页面以获取更多信息。

使用Foundation的均衡器和HAML

1 个答案: