Bootstrap 使用 vue-component 时标签显示问题

Question

查看用 vue-component 渲染的红色标签。他们假设与绿色标签一样，用 blade-template 渲染。为什么会有差异？

Blade 模板：

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

Vue-component:

<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

将标签 CSS 从 "display: inline" 更改为 "display: inline-block"。

Answer 2

实际解释很奇怪：

当您键入 HTML 时，您按 'enter' / 'return' 在每个 <span> 之后创建一个新行（如果您愿意，可以插入一个不可见的字符）元素.

对于使用 Vue 构造的元素（或通常的 JavaScript），returns 不存在，因此不会插入尾随的 space .

Chris Coyier 在 this article 中雄辩地描述了 space 删除的选项。

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

.label {
  display: inline-block;
}

Answer 3

您可以使用 &NewLine; HTML 实体，例如：

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

Bootstrap 使用 vue-component 时标签显示问题

Bootstrap label display issue when using vue-component

label

twitter-bootstrap-3

vue-component