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

Posted 2023-02-23

【中文标题】如何删除引导导航栏中的中点

【英文标题】：How to remove a median point in a bootstrap navbar

【发布时间】：2021-05-06 12:13:18

【问题描述】：

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

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

这是它目前正在做什么的视觉效果

【参考方案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>

【讨论】：

非常感谢，它成功了，但如果可能的话，你能解释一下为什么会这样做/为什么会这样做吗？我真的很好奇

不客气，我认为导航项目的样式类似于 ul>li list-style:none 和 b-navbar-nav 正在使用 ul