我正在使用Bootstrap 3.3和 Bootstrap Material Design framework构建一个应用程序.我正在尝试创建一个浮动操作按钮,当您单击它时会打开.

为了做到这一点,我创建了这个Bootply,其代码如下：

<div>
    <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i>save</i></button>
    <ul>
        <li><a href="#"><i>clear</i></a></li>
    </ul>
</div>

按钮有效,但看起来不正确.有两个问题让我疯狂.首先,弹出菜单不透明.有一种我似乎无法摆脱的边界和阴影.

其次,我无法使用Bootstrap Material Design framework页面的浮动操作按钮部分中显示的小版本按钮.我不确定我做错了什么.

因此,bootstrap CSS中的.dropdown-menu默认为Box-shadow和border,你必须重置它以使其透明.

另外在你的Bootply中它没有应用Material Design Icons,因为你没有链接字体.

关于小图标,将.btn-group-sm添加到.btn-group

这是一个工作的SNIPPET,包含各种尺寸的示例.

.floating-action-button {
  position: relative;
  top: 100px;
  margin-left: 50px;
}
ul.dropdown-menu {
  Box-shadow: none;
  border: 0;
  min-width:0;
  background:transparent
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div>
  <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i>save</i>
  </button>
  <ul>
    <li><a href="#"><i>clear</i></a>
    </li>
  </ul>
</div><div>
  <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i>save</i>
  </button>
  <ul>
    <li><a href="#"><i>clear</i></a>
    </li>
  </ul>
</div>
<div>
  <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i>save</i>
  </button>
  <ul>
    <li><a href="#"><i>clear</i></a>
    </li>
  </ul>
</div>
<div>
  <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i>save</i>
  </button>
  <ul>
    <li><a href="#"><i>clear</i></a>
    </li>
  </ul>
</div>