如何阻止Bootstrap Badge剥离空格

Question

我正在使用带有一些嵌入式字形的AngularJS和bootstrap徽章来显示一些类别信息。

当我在徽章中加入glyphicon时，文字与我喜欢的字形图有点太接近了。

我创建了一个Angular JS函数，可以将这个空格附加到徽章文本中，如下所示：

$scope.getWhiteSpace = function() {
  return "    " + $scope.category;
}

但是，当我尝试在文本前面包含空格/空格（或任何正确的术语......）时，徽章似乎会自动删除它。 我需要使用角度函数来做，因为我希望能够决定是否需要空格，取决于徽章中是否存在glyphicon。

我能够获得我想要的效果的唯一方法是在html中包含如下：

<span class="badge">

    <span class="glyphicon glyphicon-plus-sign"></span>

    &nbsp;&nbsp;&nbsp;&nbsp;{{category}}

</span>

使用函数执行此操作的正确方法是什么？或者有一个简单的CSS修复？ [我已经涉足不成功了 - 我对这些东西不熟悉......]

这是一个展示正在发生的事情的plnkr：http://plnkr.co/edit/bCIA8Lw9x2bWzIA55GIP

Answer 1

这是非常基本的问题。您可以margin-right解决此问题。

你可以这样做

1）对style="margin-right:10px;"使用内联样式glyphicon。 Example

2）为[some class]添加相同的样式，并将同一个类添加到glyphicon

Answer 2

在css中使用它：

 .glyphicon-plus-sign:before {
      margin-right: 10px;
    }

它已在此link

中提供

Answer 3

如果你想使用＆amp; nbsp;你可以这样做：

<span ng-bind-html="getWhiteSpace()"></span>

在JS中：

 $scope.getWhiteSpace = function() {
  return "   " + $scope.category;
};