Ich verwende AngularJS- und Bootstrap-Abzeichen mit einigen eingebetteten Glyphicons, um einige Kategoriedaten anzuzeigen.

Wenn ich das Glyphikon in das Abzeichen einbinde, liegt der Text für meinen Geschmack etwas zu nahe am Glyphikon.

Ich habe eine Angular JS-Funktion erstellt, um diesen Leerraum wie folgt an den Ausweistext anzuhängen:

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

Wenn ich jedoch versuche, Leerzeichen / Leerzeichen (oder was auch immer der richtige Begriff ist ...) vor den Text zu setzen, scheint das Abzeichen ihn automatisch zu entfernen. Ich muss es mit einer Winkelfunktion tun, weil ich entscheiden möchte, ob ich das Leerzeichen möchte oder nicht, abhängig davon, ob das Abzeichen ein Glyphikon enthält.

Der einzige Weg, wie ich den gewünschten Effekt erzielen konnte, besteht darin, ihn wie folgt in das HTML aufzunehmen:

<span class="badge">

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

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

</span>

Was ist der richtige Weg, um dies mit einer Funktion zu tun? Oder gibt es eine einfache CSS-Korrektur? [Ich habe mich erfolglos versucht - ich bin neu in diesem Zeug ...]

Hier ist ein Plnkr, das zeigt, was passiert: http://plnkr.co/edit/bCIA8Lw9x2bWzIA55GIP

0
Tom O'Brien 27 Aug. 2015 im 14:58

3 Antworten

Beste Antwort

Es ist ein ziemlich grundlegendes Problem. Sie können margin-right angeben, um dieses Problem zu beheben.

Sie können es so oder so machen

1) Verwenden des Inline-Stils style="margin-right:10px;" zum glyphicon. Beispiel

2) Geben Sie [some class] das gleiche Styling und fügen Sie dem glyphicon die gleiche Klasse hinzu

0
Masoom 27 Aug. 2015 im 12:18

Wenn du es mit machen willst, kannst du es so machen:

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

Und in JS:

 $scope.getWhiteSpace = function() {
  return "&nbsp;&nbsp;&nbsp;" + $scope.category;
};
0
igorshmigor 27 Aug. 2015 im 12:35

Verwenden Sie dies in CSS:

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

Es ist bereits in diesem Link verfügbar

0
Community 23 Mai 2017 im 12:14