这是一个愚蠢的问题,因为有一个简单的答案,但我正在尝试使用内联的字体很棒的按钮,如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”类将第二个很棒的字体图标推到新行。我可以通过删除 btn
类来避免这种情况,例如
<span class="redFont fa fa-times"...>
但这会删除我想保留的默认悬停行为。
另一种解决方案是将它们放在单独的单元格中,但这使得它们之间的间距太宽(甚至 1/12 也会使其太宽,而且我不知道是否可以进一步分割表格单元格,例如我可以使用普通网格,例如单元格的 col-xs-1
,然后每个跨度的 col-xs-6
。
简而言之,有没有一种方法可以在“案例名称”列旁边排列字体精美的图标,同时保留默认的悬停功能(是的,我确实意识到我可以轻松添加“on -mouseover”事件,这很脏。
最佳答案
您需要更新网格宽度,如下所示。事实上 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>
关于html - Font Awesome Styling Q(内嵌按钮),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34497824/