不能在Rails 4.2中使用Semantic-UI使用"link_to"或"button_to"

Question

我正在使用Semantic-UI来设计我的rails应用程序设计.我创建了一个卡片布局,并在该卡的底部附有一个按钮.但是当我尝试将link_to或button_to添加到底部附加按钮中的文本时,一切都变得糟透了.

HTML + Rails 4.2代码编写:

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <%= image_tag("white-image.png") %>
            </div>
            <div class="ui bottom attached button">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span><%= link_to 'Deploy', controller: 'apps', action: 'show'%>

            </div>
        </a>
    </div>

输出:

必须看起来像这样:

---

普通的HTML和CSS工作,但当我尝试使用像"link_to"或"button_to"这样的Rails4.2助手时,一切都会出错.有没有什么方法可以使用Rails helper使整个卡片布局可点击.

---

生成的HTML代码:

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf">
            </div>
            </a><div class="ui bottom attached button"><a class="red card">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span></a><a href="/apps/show">Delpoy</a>

            </div>

    </div>

---

使用HTML和Semantic-UI进行简单输出

<link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<div class="ui four cards">
  			<a class="red card">
    			<div class="image">
    				<img class="ui wireframe image" src="http://semantic-ui.com/images/wireframe/white-image.png">
    			</div>
    			<div class="ui bottom attached button">
      				<i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
      				
    			</div>
    		</a>
		</div>

Answer 1

link_to并且button_to都接受一个可用于在链接/按钮内插入任意内容的块.

<div class="ui four cards">
  <%= link_to({ controller: 'apps', action: 'show' }, { class: "red card" }) do %>
    <div class="image">
      <%= image_tag "white-image.png", class: "ui wireframe image" %>
    </div>
    <div class="ui bottom attached button">
      <i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
    </div>
  <% end %>
</div>