Question

我在复制Bootstrap的示例时创建的下拉菜单存在问题，但必须更改带有链接的按钮。这是jfiddle 这段代码：

<a class="nav-link nav-link " href="#">aaa</a>
<a class="nav-link  nav-link dropdown-toggle dropdown-toggle-split" 
   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>

显示文本（aaa）和打开菜单的下拉箭头。问题是在我创建的用于测试问题的jfiddle上，一切正常。我在代码中使用的版本（也许使用其他引导次要版本和其他内容）显示了错误位置的小三角形。它位于空间的顶部，而不是像jfiddle那样居中。我如何调查问题所在？我尝试使用Firefox的开发人员工具检查出了什么问题，但是我没有设法找到罪魁祸首。

在网络上没有使用链接代替的示例，我认为这是一个可能的原因，但是并不能解释jsfiddle示例为何起作用。

编辑：this是更完整的代码。它可以在jsfiddle上正确运行。当我独立运行时，它无法正确运行。两者都在chrome上。

编辑2：我在使用jfiddle时遇到问题：这是完整的代码：link

Answer 1

本应具有此插入符号的锚标签<a class="dropdown-toggle">为空，导致插入符号被向上推。参见https://imgur.com/a/3k5qedO

<a class="nav-link dropdown-toggle" href="/" id="navbarDropdownCategories" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>

如果在锚标记内添加一些内容，则插入符号的位置将固定。它在jsfiddle中不可重现的原因是，在jsfiddle中它不是空的。参见https://imgur.com/a/HdhRnFf

 <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownCategories" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">aaa</a>

然后在您的CSS中对插入符号进行微调

 .dropdown-toggle::after {
        vertical-align: middle !important;
    }

这是同样的js小提琴：https://jsfiddle.net/yhbo4w6L/

Answer 2

我发现了问题。显然问题在于html代码不是以

开头

<!doctype html>

我不知道为什么/怎么可能会破坏插入符号。

@Aditya Thakur的答案也是正确的：如果我未指定文档类型，则插入符号的字段不应为空。 +1为他的答案，但我想这应该是正确的答案。

Always define a doctype on any html documents

如何找到导致Bootstrap 4异常行为的原因

2 个答案: