problème d'affichage des étiquettes Bootstrap lors de l'utilisation Regarder vue composants

Question

Screen

les étiquettes rouges, rendus avec vue composants. Ils supposent agir de la même manière que les étiquettes vertes, rendues avec un modèle de lame. Pourquoi y a-t-il une différence?

modèle Lame:

<div class="col-sm-2"> 

    <span class="label label-success">good badge 1</span> 
    <span class="label label-success">good badge 2</span> 
    <span class="label label-success">good badge 3</span> 
    <span class="label label-success">good badge 4</span> 
    <span class="label label-success">good badge 5</span> 

    <badge-list></badge-list> 

    <span class="label label-success">good badge 6</span> 
    <span class="label label-success">good badge 7</span> 

</div> 
<div class="col-sm-10"> 
    some text</br> 
    some text</br> 
    some text</br> 
    some text</br> 
    some text</br> 
    some text</br>    
</div> 

-composant Vue:

<template> 
    <span v-for="Badge in Badges" class="label label-danger">{{ Badge.name }}</span> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     Badges: [ 
     {"name": "bad badge 1"}, 
     {"name": "bad badge 2"}, 
     {"name": "bad badge 3"}, 
     {"name": "bad badge 4"}, 
     {"name": "bad badge 5"}, 
     ], 
    }; 
    }, 
}; 
</script> 

Answer 1

L'explication réelle de c'est étrange:

Lorsque vous tapez votre code HTML, vous appuyez sur « Entrée »/« retour » pour créer une nouvelle ligne (qui insère un caractère invisible si vous préférez) après chaque élément <span> .

Pour les éléments construits avec Vue (ou JavaScript en général, d'ailleurs), les rendements ne sont pas présents, et, par conséquent, l'espace de fuite est pas insérée.

Chris Coyier décrit avec éloquence les options pour le retrait de l'espace dans this article.

La solution consiste à remplacer le Bootstrap CSS pour les étiquettes:

.label { 
    display: inline-block; 
} 

Answer 2

Modifier l'étiquette CSS "display: inline" à "display: inline-block".

Answer 3

Vous pouvez utiliser 
 entité HTML comme:

<template v-for="Badge in Badges"> 
    <span class="label label-danger">{{ Badge.name }}</span>&NewLine; 
</template>