html – Bootstrap – 浮动 *** 作按钮菜单大小和阴影

概述我正在使用Bootstrap 3.3和 Bootstrap Material Design framework构建一个应用程序.我正在尝试创建一个浮动 *** 作按钮,当您单击它时会打开. 为了做到这一点,我创建了这个Bootply,其代码如下： <div class="btn-group dropup floating-action-button"> <button type="button" 我正在使用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>

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

其次,我无法使用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>

总结

以上是内存溢出为你收集整理的html – Bootstrap – 浮动 *** 作按钮菜单大小和阴影全部内容，希望文章能够帮你解决html – Bootstrap – 浮动 *** 作按钮菜单大小和阴影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。