Twitter Bootstrap button_to切换到手机上的图标

Question

我有一个表格，其中包含其中一个单元格中的按钮。按钮是单词，但我想在移动设备上切换为简单图标，并在缩小尺寸时使用。我的当前代码对于按钮看起来像这样。

在我看来，我有：

<td width="17.5%"><%= which_button(ra) %></td>

在我的帮助文件中我有

def which_button(ra)
  if ra.tenant_approved == false
    button_to "Approve?", { controller: "tenants/reportapprovals", id: ra.id, action: "update" }, method: :patch, class: "btn-default btn-xs", data: {confirm: "Are you sure you want to give #{ra.manager_company} access to your report?" }
  else
....
end

如何切换“批准？”当一个较小的屏幕时，竖起图标？

Answer 1

如果您想根据屏幕尺寸切换字词/图片，可以使用twitter-bootstrap的Responsive Utilities根据媒体查询显示/隐藏内容。

E.g：

<h1 class="visible-xs">Only visible on xtra-small screen</h1>
<h1 class="visible-sm">Only visible on small screen</h1>    
<h1 class="visible-md">Only visible on medium screen</h1>    
<h1 class="visible-lg">Only visible on large screen</h1>    

在你的情况下，我猜这将是这样的：

<div class="container">
  <div class="visible-xs">
    <span class="glyphicon glyphicon-thumbs-up"></span>
  </div>
  <div class="hidden-xs">
    Text here only visible when bigger then xs
  </div>
</div>