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的響應實用程序根據媒體查詢顯示/隱藏內容。

例如：

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