html – 不能在Rails 4.2中使用Semantic-UI使用“link_to”或“button_to”

html – 不能在Rails 4.2中使用Semantic-UI使用“link_to”或“button_to”,第1张

概述我正在使用Semantic-UI来设计我的rails应用程序设计.我创建了一个卡片布局,并在该卡的底部附有一个按钮.但是当我尝试将link_to或button_to添加到底部附加按钮中的文本时,一切都变得糟透了. HTML Rails 4.2代码编写: <div class="ui four cards"> <a class="red card"> <div 我正在使用Semantic-UI来设计我的rails应用程序设计.我创建了一个卡片布局,并在该卡的底部附有一个按钮.但是当我尝试将link_to或button_to添加到底部附加按钮中的文本时,一切都变得糟透了.

HTML Rails 4.2代码编写:

<div >        <a >            <div >                <%= image_tag("white-image.png") %>            </div>            <div >                <i ></i><span ></span><%= link_to 'Deploy',controller: 'apps',action: 'show'%>            </div>        </a>    </div>

输出:

必须看起来像这样:

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

生成的HTML代码:

<div >        <a >            <div >                <img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf">            </div>            </a><div ><a >                <i ></i><span ></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 >  			<a >    			<div >    				<img  src="http://semantic-ui.com/images/wireframe/white-image.png">    			</div>    			<div >      				<i ></i><span ></span>Deploy      				    			</div>    		</a>		</div>
解决方法 link_to和button_to都接受一个块,可用于在链接/按钮内插入任意内容.

<div >  <%= link_to({ controller: 'apps',action: 'show' },{ class: "red card" }) do %>    <div >      <%= image_tag "white-image.png",class: "ui wireframe image" %>    </div>    <div >      <i ></i><span ></span>Deploy    </div>  <% end %></div>
总结

以上是内存溢出为你收集整理的html – 不能在Rails 4.2中使用Semantic-UI使用“link_to”或“button_to”全部内容,希望文章能够帮你解决html – 不能在Rails 4.2中使用Semantic-UI使用“link_to”或“button_to”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1082969.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-27
下一篇2022-05-27

发表评论

登录后才能评论

评论列表(0条)

    保存