Font Awesome Styling Q（内嵌按钮）答案

【问题标题】：Font Awesome Styling Q (Buttons In-Line)Font Awesome Styling Q（内嵌按钮）
【发布时间】：2015-12-29 01:28:03
【问题描述】：

这是一个愚蠢的问题，因为有一个简单的答案，但我正在尝试使用内联的字体真棒按钮，如 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" 事件，它只是脏。

【问题讨论】：

只做<td class = "col-xs-3"> 而不是<td class = "col-xs-1">
是的，就是这样，我以为 btn 是在强制换行，但我猜 btn 只是占用了更多空间。谢谢。如果您愿意，可以将其作为答案发布，因为我已经发布了一个 Q 和所有内容。编辑：“Danke，das ...”工作“直觉。”这句话会是什么？ Kannst du sagen "Das geht" hier?

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

您需要更新网格宽度，如下所示。实际上引导网格应该有 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>

【讨论】：