Bootstrap - 浮动操作按钮菜单大小和阴影

Question

我正在使用 Bootstrap 3.3 和 Bootstrap Material Design framework 构建应用程序。我正在尝试制作一个在您单击时打开的浮动操作按钮。

为了尝试做到这一点，我创建了这个 Bootply，它具有以下代码：

<div class="btn-group dropup floating-action-button">
    <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
    <ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
        <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></li>
    </ul>
</div>

按钮可以用，但看起来不对。有两个问题让我抓狂。首先，弹出菜单不是透明的。有一个border和我似乎无法摆脱的影子

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

Answer 1

我不会说它是理想的，但以下似乎可以解决您的部分问题。

.dropdown-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

不幸的是，我无法弄清楚 material-icons class 不起作用的原因。希望这个答案能帮助您更接近解决方案。

Answer 2

所以 bootstrap CSS 中的 .dropdown-menu 默认有 box-shadow 和 border，你必须重新设置它才能使它透明.

此外，在您的 Bootply 中，它没有应用 Material 设计图标，因为您没有 link 字体。

关于小图标，.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 class="btn-group btn-group-lg dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div><div class="btn-group dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>

Bootstrap - 浮动操作按钮菜单大小和阴影

Bootstrap - Floating action button menu size and shadow

html

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-material-design