Twitter bootstrap 3 使用vue组件时出现引导标签显示问题

查看使用vue组件渲染的红色标签。它们的作用与使用刀片模板渲染的绿色标签相同。为什么会有区别

刀片模板：

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

好徽章1
好徽章2
好徽章3
好徽章4
好徽章5
好徽章6
好徽章7
一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

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>

{{Badge.name}
导出默认值{
数据（）{
返回{
徽章：[
{“姓名”：“坏徽章1”}，
{“姓名”：“坏徽章2”}，
{“姓名”：“坏徽章3”}，
{“姓名”：“坏徽章4”}，
{“姓名”：“坏徽章5”}，
],
};
},
};

将标签CSS从“显示：内联”更改为“显示：内联块”。

对此的实际解释很奇怪：

键入HTML时，按“enter”/“return”在每个

元素后创建新行（如果愿意，可以插入一个不可见的字符）

对于使用Vue（或JavaScript）构造的元素，返回不存在，因此不会插入尾随空格

Chris Coyier雄辩地描述了中的空间移除选项

解决方案是覆盖标签的引导CSS：

.label {
  display: inline-block;
}

---

您可以使用

&NewLineHTML实体，如：

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


{{Badge.name}}&NewLine；
我已经解释了为什么需要在我的答案中添加
内联块。如果你觉得它有用，请将它标记为已接受并投票支持：-）非常感谢你的解释&新线；同样有效，但不需要覆盖任何可能导致项目中其他地方出现问题的引导CSS。请参阅@Denis Pugachev的回答，我喜欢这个答案，因为它不涉及覆盖CSS中的引导值。