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

Bootstrap - Floating action button menu size and shadow

提问by user70192

I am building an app with Bootstrap 3.3 and Bootstrap Material Design framework. I am trying to make a floating action button that opens when you click it.

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

In an attempt to do this, I've created this Bootply, which has the following code:

为了做到这一点，我创建了这个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>

The buttons works, but it doesn't look right. There are two issues that are driving me nuts. First, the popup menu isn't transparent. There is like a borderand shadow that I can't seem to get rid of.

按钮有效，但看起来不正确。有两个问题让我抓狂。首先，弹出菜单不透明。有一个border我似乎无法摆脱的阴影。

Second, I can't use the small version of the buttons as shown in the Floating action buttonssection of the Bootstrap Material Design frameworkpage. I'm not sure what I'm doing wrong.

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

采纳答案by dippas

So the .dropdown-menuin bootstrap CSS has by default box-shadowand border, which you have to reset it in order to make it transparent.

所以.dropdown-menuin bootstrap CSS 默认有box-shadowand border，你必须重置它才能使它透明。

Plus in your Bootply it's not applying the Material Design Icons, because you didn't link the fonts.

另外，在您的 Bootply 中，它没有应用 Material Design Icons，因为您没有链接字体。

Regarding small icons, add .btn-group-smto .btn-group

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

Here is a working SNIPPETwith examples for every sizes.

这是一个工作片段，其中包含各种尺寸的示例。

.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>

回答by Dexter

I wouldn't say that it is ideal, but the following seems to solve part of your problem.

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

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

Unfortunately, I was not able to figure out what the material-iconsclass didn't work. Hopefully this answer will help you get closer to a solution.

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