Font Awesome Styling Q(内嵌按钮)
Font Awesome Styling Q (Buttons In-Line)
这是一个愚蠢的问题,因为有一个简单的答案,但我正在尝试使用内联字体超棒的按钮,如 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" class 将第二个超棒的字体图标推到一个新行。我可以通过删除 btn
class 来避免这种情况,例如
<span class="redFont fa fa-times"...>
但这会删除我想保留的默认悬停行为。
另一种解决方案是将它们放在单独的单元格中,但这会使它们之间的间距太宽(即使是 1/12 也太宽了,我不知道是否可以进一步细分 table 单元格,就像我可以使用普通网格一样,例如 col-xs-1
用于单元格,然后 col-xs-6
用于每个跨度。
简而言之,有没有一种方法可以在 "Case Name" 列旁边将超棒的字体图标排成一行,同时保持默认的悬停功能(是的,我知道我可以轻松添加一个 "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>
这是一个愚蠢的问题,因为有一个简单的答案,但我正在尝试使用内联字体超棒的按钮,如 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" class 将第二个超棒的字体图标推到一个新行。我可以通过删除 btn
class 来避免这种情况,例如
<span class="redFont fa fa-times"...>
但这会删除我想保留的默认悬停行为。
另一种解决方案是将它们放在单独的单元格中,但这会使它们之间的间距太宽(即使是 1/12 也太宽了,我不知道是否可以进一步细分 table 单元格,就像我可以使用普通网格一样,例如 col-xs-1
用于单元格,然后 col-xs-6
用于每个跨度。
简而言之,有没有一种方法可以在 "Case Name" 列旁边将超棒的字体图标排成一行,同时保持默认的悬停功能(是的,我知道我可以轻松添加一个 "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>