J'effectue une répétition répétée des étiquettes
<span class="label label-primary" style="margin-right:5px;" ng-repeat="a in data.tags">{{a.tagName}}</span>
Si la sortie contient de nombreux libellés, elle disparaît de l'écran au lieu d'être emballée de manière réactive en fonction de la taille de col-md.
voir exemple: http://www.bootply.com/119412
Ce qui donne?
Merci!
Réponses:
9 pour la réponse № 1Modification de l'affichage: inline à inline-block corrigé ce problème.
<span class="label label-primary" style="margin-right:5px; display:inline-block" ng-repeat="a in data.tags">{{a.tagName}}</span>
1 pour la réponse № 2
J'ai essayé d'utiliser display: inline-block mais cela a changé l'apparence du remplissage des étiquettes dans Bootstrap 3.
Alors j'ai enquêté un peu plus loin. Le problème est qu'il n'y a pas d'espace entre les étiquettes, donc il n'y a rien à fermer. Une solution simple consiste à insérer l’étiquette dans une autre plage et à insérer un espace avant ou après la plage intérieure.
<span ng-repeat="a in data.tags">
<span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span>
</span>
Les espaces dus au formatage devant l'espace interne suffisent pour un point d'habillage. Si vous deviez tout mettre sur une seule ligne, il vous faudrait ajouter un espace bien visible.
<!-- _ conspicuous -->
<span ng-repeat="a in data.tags"> <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>
Sans l'espace ci-dessus, les étiquettes ne seront pas enveloppées.
J'ai aussi essayé divers ::after { content: " "; white-space: normal } stratégies. Le fait de placer cela sur l'étiquette elle-même a déclenché l'emballage, mais cela coupe l'extrémité de l'étiquette qui enveloppe. Il fallait encore une étendue extérieure pour être visuellement correct. Bien qu’au moins avec une classe, il est explicite que le but du conteneur est de déclencher un wrapping:
<style>
.wrappable::after { content: " " } /* content: "" wraps too */
</style>
<span class="wrappable" ng-repeat="a in data.tags"><span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>
Les raisons
C’est un peu agaçant que vous deviez modifier la structure de votre document pour obtenir le résultat escompté de toute évidence. Cependant, je pense que c’est une conséquence du fait que les white-space: no-wrap. (Il y a de bonnes raisons pour que les étiquettes soient placées comme ceciDans ce cas, les mots d’une étiquette risquent de dépasser les lignes.) Le navigateur détecte un tas d’éléments non-wrap sans espace entre eux. Il est donc logique de conclure que les éléments ne doivent pas être décomposés du tout. L’autre solution pour rendre les étiquettes «correctement» consiste à en faire une structure multi-éléments (comme c’est le cas ci-dessus) pour encapsuler l’élément non-wrappable dans une structure wrappable. Mais ceci n’est pas idéal car l’élément conteneur serait redondant dans de nombreux cas.
0 pour la réponse № 3
La réponse a fonctionné pour moi. Je suis allée de l’avant et l’ajoutée à ma classe d'espacement des étiquettes, car les étiquettes d'une répétition n'ont pas un espacement correct. Voir ma classe ci-dessous:
.label-spaced {
margin-right:5px;
margin-bottom:5px !important;
display:inline-block;
}
0 pour la réponse № 4
Je suis un peu en retard pour le jeu, mais cela a fonctionné pour moi (testé uniquement dans Firefox):
<span class="label label-default" ng-repeat-start="tag in select.selectedTags">
{{tag}} <i class="fa fa-times fa-fw cursor-pointer"></i>
</span>
<bwr ng-repeat-end />