html - Font Awesome Styling Q(内嵌按钮)

Question

这是一个愚蠢的问题，因为有一个简单的答案，但我正在尝试使用内联字体超棒的按钮，如 this plunk. 所示。

如果我这样做:

            <td class = "col-xs-1">
                <span class="btn yellowFont fa fa-star"
                      title = "Set this as the item's primary case."
                      ng-if="!case.primaryCase">
                </span>

                <span class="btn redFont fa fa-times"
                      title = "Remove item from case."
                      ng-if="!case.primaryCase">
                </span>
            </td>

“btn”类将第二个 Font Awesome 图标推到一个新行。我可以通过删除 btn 类来避免这种情况，例如

<span class="redFont fa fa-times"...>

但这会删除我想保留的默认悬停行为。

另一种解决方案是将它们放在单独的单元格中，但这会使它们之间的间距太宽(即使是 1/12 也太宽了，我不知道我是否可以进一步分割表格单元格，例如我可以使用普通网格，例如单元格的 col-xs-1 和每个跨度的 col-xs-6。

简而言之，有没有一种方法可以让 Font Awesome 图标排在“案例名称”列旁边，同时保持默认的悬停功能(是的，我确实意识到我可以轻松地添加一个“on -mouseover”事件，它只是脏了。

Answer 1

您需要更新网格宽度，如下所示。事实上，bootstrap 网格应该有 12 列，取 3 列和 9 列。

         <td class = "col-xs-3">
            <span class="btn yellowFont fa fa-star"
                  title = "Set this as the item's primary case."
                  ng-if="!case.primaryCase">
            </span>

            <span class="btn redFont fa fa-times"
                  title = "Remove item from case."
                  ng-if="!case.primaryCase">
            </span>
        </td>
        <td class = "col-xs-9">
                {{case.caseNumber}}
            </td>