Twitter Bootstrap button_to 切换到移动设备上的图标答案

【问题标题】：Twitter Bootstrap button_to switch to icon on mobileTwitter Bootstrap button_to 切换到移动设备上的图标
【发布时间】：2016-12-18 17:38:26
【问题描述】：

我有一个表格，其中一个单元格中包含按钮。按钮是文字，但我想让文字在移动设备上切换为简单的图标，并且在调整大小时更小。我当前的按钮代码如下所示。

在我看来，我有：

<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

如何切换“批准”？小屏幕时要竖起大拇指？

【问题讨论】：

您确定选择了正确的标签吗？
@Banzay 正确的标签是什么意思？
我的意思是标签html、css、twitter-bootstrap。您提供的代码既不像 html 也不像 css。
@Banzay 哦，我明白你的意思了。我从我的视图中添加了这行代码，但我的视图正在使用来自助手的逻辑。我只需要使用我假设的某种切换。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

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

例如：

<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>

【讨论】：

这太棒了！但是，如果您想在大于 xs 的任何内容中显示单词，但在 xs 中仅显示图标，您如何使用这些类？我试过button_to <i class="hidden-xs">"Approve?"</i><i class="visible-xs-block glyphicon glyphicon-thumbs-up"></i>, { 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?" }