如何让 MaterializeCSS 固定动作 btn 工具栏变成一个工具栏?

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)

con*_*nty 5

我想通了,我会继续提出这个问题,以便它可以帮助其他人!

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