引导-浮动操作按钮菜单大小和阴影
提问于 2016-03-30 06:49:54
我正在用Bootstra3.3和自举材料设计框架构建一个应用程序。我试图使一个浮动动作按钮，打开时，你点击它。
为了做到这一点，我创建了这个引线，它有以下代码：
<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和阴影，我似乎无法摆脱。
第二，我不能使用小版本的按钮，如浮动操作按钮部分中所示的自举材料设计框架页面。我不知道我做错了什么。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-02 05:50:45
因此，引导CSS中的.dropdown-menu在默认情况下有box-shadow和border，为了使其透明，您必须重新设置它们。
另外，在你的启动，它没有应用材料设计图标，因为你没有链接字体。
对于小图标，将.btn-group-sm添加到.btn-group
下面是一个工作的片段，并给出了每个大小的示例。
.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>
Stack Overflow用户
发布于 2016-04-01 11:32:50
我不会说它是理想的，但以下似乎解决了你的部分问题。
.dropdown-menu {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}不幸的是，我无法弄清楚material-icons类不工作的地方。希望这个答案能帮助你更接近解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36312401
复制相关文章
腾讯云开发者
