Trieda štítku Bootstrap nie je zabalená - angularjs, twitter-bootstrap, twitter-bootstrap-3

Vykonávam niekoľko opakovaní štítkov

<span class="label label-primary" style="margin-right:5px;" ng-repeat="a in data.tags">{{a.tagName}}</span>

Ak je na výstupe veľa štítkov, ide mimo obrazovku, namiesto toho, aby sa zodpovedne zalamoval podľa veľkosti stĺpca, do ktorej ho mám.

pozri príklad: http://www.bootply.com/119412

Čo dáva?

Vďaka!

odpovede:

9 pre odpoveď č. 1

Zmena zobrazenia: inline na inline-block to opravila.

<span class="label label-primary" style="margin-right:5px; display:inline-block" ng-repeat="a in data.tags">{{a.tagName}}</span>

---

1 pre odpoveď č. 2

Snažil som sa používať display: inline-block ale zmenilo to vzhľad výplne štítkov v Bootstrap 3.

Vyšetroval som teda trochu ďalej.Problém je v tom, že medzi štítkami nie je žiadny priestor, takže nie je potrebné nič zabaliť. Jednoduchou opravou je uzavrieť štítok do iného rozsahu a vložiť medzeru pred alebo za vnútorné rozpätie.

<span ng-repeat="a in data.tags">
<span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span>
</span>

Medzery v dôsledku formátovania pred vnútorným priestorom stačia na zalamovací bod. Ak by ste to všetko dali do jedného riadku, bolo by treba pridať nápadný priestor.

<!--                             _ conspicuous -->
<span ng-repeat="a in data.tags"> <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>

Bez medzery vyššie sa štítky nezabalia.

Skúšal som aj rôzne ::after { content: " "; white-space: normal } stratégie.Ak to umiestnite na samotný štítok, spustilo sa to zabalenie, ale odreže sa to koniec štítku, ktorý sa obalí. Stále si vyžadovalo vonkajšie rozpätie, aby bola vizuálne správna. Aj keď je to minimálne trieda, je výslovné, že účelom kontajnera je spustiť zalamovanie:

<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>

dôvody

Je trochu nepríjemné, že aby ste dosiahli tento zjavne očakávaný výsledok, musíte zmeniť štruktúru svojho dokumentu. Domnievam sa však, že je to dôsledok samotných označení white-space: no-wrap. (Existuje dobrý dôvod na to, aby sa štítky nastavovali taktospôsobom ... inak by sa slová vo vnútri štítku mohli pretrhnúť cez riadky.) Prehliadač vidí veľa prvkov bez zalamovania bez medzery medzi nimi. Robí teda logický záver, že prvky by sa nemali vôbec rozpadať. Alternatívou k tomu, aby sa štítky vykresľovali „správne“, je vytvoriť zo štítkov viacprvkovú štruktúru (čo je uvedené vyššie), ktoré zapuzdrujú nezabaliteľný prvok do zabaliteľného. To však nie je ideálne, pretože prvok kontajnera by bol v mnohých prípadoch nadbytočný.

---

0 pre odpoveď č. 3

Odpoveď sa mi osvedčila. Išiel som do toho a pridal som ho do svojej triedy s odstupom štítkov, pretože štítky v rámci opakovania nemajú správne medzery. Pozri moju triedu nižšie:

.label-spaced {
margin-right:5px;
margin-bottom:5px !important;
display:inline-block;
}

---

0 pre odpoveď č. 4

Do hry prichádzam trochu neskoro, ale fungovalo mi to (testované iba vo Firefoxe):

<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 />

---