con*_*nty 2 html css materialize
我想要一个像materializecss中的固定动作btn这样的工具栏,但我只是希望它成为我不想它从按钮中弹出的工具栏。有谁知道如何做到这一点??这里有一些代码来解释。
<footer>
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</footer>Run Code Online (Sandbox Code Playgroud)
我想通了,我会继续提出这个问题,以便它可以帮助其他人!
<div class="toolbar-fixed red">
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
.toolbar-fixed {
width: 100%;
padding: 0;
height: 56px;
position: fixed;
bottom: 0px;
}
.toolbar-fixed.active > a i {
opacity: 0;
}
.toolbar-fixed ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
top: 0;
bottom: 0;
}
.toolbar-fixed ul li {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
margin: -;
height: 100%;
transition: none;
position: relative;
top: -15px;
}
.toolbar-fixed ul li a{
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
box-shadow: none;
color: #fff;
line-height: 56px;
z-index: 1;
}
.toolbar-fixed ul li a i {
line-height: inherit;
}
.toolbar-fixed ul {
left: 0;
right: 0;
text-align: center;
}
.toolbar-fixed ul li {
margin-bottom: 15px;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4190 次 |
| 最近记录: |