Wykonuję powtórzenie ng etykiet
<span class="label label-primary" style="margin-right:5px;" ng-repeat="a in data.tags">{{a.tagName}}</span>
Jeśli wyjście ma wiele etykiet, znika z ekranu, zamiast owijać się odpowiednio do rozmiaru col-md, w którym go mam.
patrz przykład: http://www.bootply.com/119412
Co daje?
Dzięki!
Odpowiedzi:
9 dla odpowiedzi № 1Zmiana wyświetlania: naprawiono to za pomocą wstawiania do wstawiania do bloku.
<span class="label label-primary" style="margin-right:5px; display:inline-block" ng-repeat="a in data.tags">{{a.tagName}}</span>
1 dla odpowiedzi nr 2
Próbowałem użyć display: inline-block ale zmieniło wygląd wypełnienia etykiet w Bootstrap 3.
Więc zbadałem trochę dalej. Problem polega na tym, że między etykietami nie ma spacji, więc nie ma się na co pakować. Łatwym rozwiązaniem jest zamknięcie etykiety w innym przęsle i wstawienie spacji przed lub za przęsłem wewnętrznym.
<span ng-repeat="a in data.tags">
<span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span>
</span>
Spacja wynikająca z formatowania przed wewnętrzną przestrzenią wystarcza na punkt owijania. Jeśli umieścisz to wszystko w jednym wierszu, musisz dodać wyraźne miejsce.
<!-- _ conspicuous -->
<span ng-repeat="a in data.tags"> <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>
Bez powyższej przestrzeni etykiety nie zostaną zawinięte.
Próbowałem też różnych ::after { content: " "; white-space: normal } strategie. Umieszczenie tego na samej etykiecie spowodowało owijanie, ale odcina koniec owijającej się etykiety. Nadal wymagało to, aby zewnętrzna rozpiętość była poprawna wizualnie. Chociaż przynajmniej w przypadku klasy, jest oczywiste, że celem kontenera jest wywołanie zawijania:
<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>
Powody
To trochę denerwujące, że musisz zmienić strukturę dokumentu, aby uzyskać ten oczywiście oczekiwany rezultat. Uważam jednak, że jest to konsekwencja samych etykiet white-space: no-wrap. (Jest dobry powód, aby ustawić to etykietysposób… w przeciwnym razie słowa w etykiecie mogą się przecinać.) Przeglądarka widzi kilka elementów bez zawijania, bez odstępów między nimi. Stąd logiczny wniosek, że elementów nie należy w ogóle rozbijać. Alternatywą dla renderowania etykiet „poprawnie” jest uczynienie z etykiet struktury wieloczęściowej (co właśnie to robi powyższe), aby zamknąć element, który nie może być zawijany, w element, który można zawinąć. Nie jest to jednak idealne, ponieważ element kontenera byłby w wielu przypadkach zbędny.
0 dla odpowiedzi № 3
Odpowiedź zadziałała dla mnie. Poszedłem dalej i dodałem go do mojej klasy z odstępami między etykietami, ponieważ etykiety w powtórzeniu nie mają odpowiedniego odstępu. Zobacz moją klasę poniżej:
.label-spaced {
margin-right:5px;
margin-bottom:5px !important;
display:inline-block;
}
0 dla odpowiedzi nr 4
Jestem trochę spóźniony do gry, ale to zadziałało dla mnie (tylko przetestowane w Firefoksie):
<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 />