bootstrap 4 Dropdown xhtml问题答案

【问题标题】：bootstrap 4 Dropdown xhtml issuebootstrap 4 Dropdown xhtml问题
【发布时间】：2018-01-27 13:33:23
【问题描述】：

我正在尝试在 xhtml 页面中插入一个简单的下拉控件。我正在使用引导程序 4.0。

仅供参考：以下代码在 html 上运行良好，在 xhtml 上无法扩展。此外，使用 bootstrap 3 的 html 和 xhtml 都可以正常工作。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" 


href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</head>
<body>

<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  Dropdown button
</button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Link 1</a>
     <a class="dropdown-item" href="#">Link 2</a>
     <a class="dropdown-item" href="#">Link 3</a>
   </div>
</div>
</div>

</body>
</html>

有什么想法吗？谢谢

【问题讨论】：

如何插入？您是否检查过省略<!doctype html> 是否是问题所在？根据 BS4“入门”，此文档类型是必需的。
是的，我添加了这个标签，但问题仍然存在。

标签： twitter-bootstrap drop-down-menu xhtml popper.js

【解决方案1】：

这些是 popper.js 中的错误。

在各个地方，popper.js 将元素的节点名称与“HTML”和“BODY”进行比较。

在 XHTML 中，节点名称不是“HTML”和“BODY”，而是“html”和“body”——即小写。因此它们不匹配，JS 代码陷入无限循环（可能还有其他问题）。

Bootstrap 3 使用“tether”而不是“popper”，这可能没有等效的错误。

【讨论】：

如果它根本无法在不是为它设计的环境中工作，你能称其为错误吗？
@MrLister - 这是一个公平的问题。对我来说这感觉像是一个错误，因为 (a) JS 确实在 DOM 文档上运行，而不是标记语法，并且 (b) 因为“错误”的修复非常简单。但是，是的，可以合理地声称它超出了其设计范围。
一般来说，测试节点名称会使代码变得脆弱。无法保证一旦 JS 开始对其进行操作，即使在 HTML 文档中它们也只会是一个 HTML 元素和一个 BODY 元素。更好的方法是将元素与 document.documentElement 和 document.body 进行比较，因为这是 popper 代码真正要寻找的。span>