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

Question

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

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