如何删除 bootstrap 导航栏中的中点

Question

我正在创建只是一个 bootstrap 导航栏的组件，我得到并发出的是在我的每个导航项之间我得到了一个正在显示的中点。我从来没有输入任何代码来让它出现，bootstrap 文档中也没有提到它。并且这一点的行为非常不稳定，因为在某些计算机上该点位于 link 之上而不是它们之间。

<template>
 <div>
<b-navbar type="dark" variant="info"  fixed="top" >
  <b-navbar-brand >Kisdis</b-navbar-brand>
  <b-nav-item color="white" href="#1" class="a">sample1 </b-nav-item>
  <b-nav-item color="white" href="#2" class="a">sample2</b-nav-item>
  <b-nav-item color="white" href="#3" class="a">sample3</b-nav-item>
  <b-nav-item color="white" href="#4" class="a">sample4</b-nav-item>
</b-navbar>
</div>
  </template>

和 CSS，如果这是相关的

a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: blueviolet;
}

/* selected link */
a:active {
  color: white;
}

这是它当前正在做的事情的视觉效果

Answer 1

尝试使用 <b-navbar-nav> 组件包装您的项目：

div>
  <b-navbar toggleable="lg" type="dark" variant="info">
 <b-navbar-brand >Kisdis</b-navbar-brand>
<b-navbar-nav>
  <b-nav-item color="white" href="#1" class="a">sample1 </b-nav-item>
  <b-nav-item color="white" href="#2" class="a">sample2</b-nav-item>
  <b-nav-item color="white" href="#3" class="a">sample3</b-nav-item>
  <b-nav-item color="white" href="#4" class="a">sample4</b-nav-item>
</b-navbar-nav>

  </b-navbar>
</div>

如何删除 bootstrap 导航栏中的中点

How to remove a median point in a bootstrap navbar

html

navbar

vue.js

bootstrap-4

vue-component