html - 如何将 MaterializeCSS fixed-action-btn Toolbar 变成一个工具栏？

Question

我想要一个像 materializecss 中的 fixed-action-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>

Answer 1

我想通了，我会继续这个问题，这样它可以帮助其他人!

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

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