Question

我试图在下拉菜单中的链接左侧添加一个glyphicon，但似乎无法弄明白。这就是我的代码：

<div class="col-md-4">
     <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">options
          <span class="caret"></span></button>
          <ul class="dropdown-menu">

          <li><i class="glyphicon glyphicon-flag"></i><%=link_to "report link", report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %></li>

有人可以向我解释如何做到这一点吗？

谢谢！

Answer 1

只需将图标放在链接中 - 这样做没有视觉上的缺点，甚至可能改善用户体验（您也可以点击图标）。

<li><a href="#"><i class="glyphicon glyphicon-flag"></i> link</a></li>

请参阅此bootply

所以你的新ruby链接看起来像

<%=link_to "<i class='glyphicon glyphicon-flag'></i> report link".html_safe, report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %>

（道歉，如果这是错误的，我实际上并不知道Ruby。我认为这是一个css定位错误，但如果Ruby错了也让我知道，我将删除这个答案）

Answer 2

尝试使用span之外的link_to。您将在link_to之后删除显示文本（＆＃34;报告链接＆＃34;），并在Glyphicon span类结束后添加回来。

    <li>
      <%=link_to report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post do %>
        <span class="glyphicon glyphicon-flag"></span> Report Link
      <% end %>
    </li>

如何添加glyphicon到bootstrap下拉菜单

2 个答案: