引导材料设计下拉按钮未正确绘制答案

【问题标题】：Bootstrap material design dropdown button is not drawn correctly引导材料设计下拉按钮未正确绘制
【发布时间】：2015-08-06 18:04:02
【问题描述】：

我正在尝试使用以下链接中的引导材料设计中的按钮： http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

我从上面的链接下载了下拉按钮和所有需要的 CSS 和 JavaScript。当我尝试测试示例下拉按钮时，它没有正确绘制。下面是示例 html 代码和输出。

我无法找出我错过了什么。我试图从网上找到答案，但没有找到任何答案！所以我把它贴在这里。

<html>

<head>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
  <link href="css/roboto.min.css" rel="stylesheet">
  <link href="css/material.min.css" rel="stylesheet">
  <link href="css/ripples.min.css" rel="stylesheet">
</head>

<body>

  <h3>Why this dropdown icon height is half of button????</h3>
  <div class="btn-group">
    <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
    <a href="bootstrap-elements.html" data-target="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:void(0)">Action</a>
      </li>
      <li><a href="javascript:void(0)">Another action</a>
      </li>
      <li><a href="javascript:void(0)">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a href="javascript:void(0)">Separated link</a>
      </li>
    </ul>
  </div>

  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <script src="js/ripples.min.js"></script>
  <script src="js/material.min.js"></script>
  <script>
    $(document).ready(function() {
      // This command is used to initialize some elements and make them work properly
      $.material.init();
    });
  </script>
</body>

</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-material-design

【解决方案1】：

将 doctype 设置为 HTML5 对我有用——将 <!doctype html> 添加到文档顶部。

我不知道为什么，但这是我想到的第一件事。

【讨论】：

干得好。 +1。我在 jsFiddle 玩，想知道为什么这对我有用，直到我看到你的答案。一定是这个。这是一个带有 HTML 4.01 Transitional 文档类型的示例，它会破坏布局。 jsFiddle 。使用 HTML 5 doctype 一切都很好。
啊！凉爽的。将文档类型设置为 HTML5 有效。 gr8，感谢您的快速回复。