Css 是什么导致引导下拉列表中出现额外的空白？

是什么导致我的下拉列表有额外的空白？（为截图道歉）

打盹
1小时

---

据我所知，在我的CSS文件中没有什么奇怪的东西会导致这种情况。我正在使用Bootstrap4。

您的HTML结构错误。检查

。下拉菜单

元素中的内容

使用

1小时，而不是
1小时

打盹
1小时

查看此代码。我删除了

，因为它在引导中不是有效的类。在本例中，我将

btn default

更改为其他按钮，

btn primary

最重要的错误-查看

下拉菜单

。您可以打开

按钮

标记，然后关闭

li

，因此我将其更改为

div

，效果很好

查看引导文档以获取更多信息

/*演示*/
正文{padding:3rem}

打盹
1小时

在浏览器中使用DOM浏览器，查看css创建边距的内容

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span class="caret">Snooze</span>
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item">1 Hour</li>
    </div>
</div>