浮动操作菜单不适用于 Bootstrap CSS

Question

我有一个浮动操作菜单 (JQuery + CSS) :

HTML :

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="hamburger" class="waves-effect waves-light">
    <div id="wrapper">
      <span class="icon-bar" id="one"></span>
      <span class="icon-bar" id="two"></span>
      <span class="icon-bar" id="thr"></span>
    </div>
  </div>

  <div id="btnExit" class="hamburger-nav">
    <span class="floatingmenu_label">Exit</span>
    <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnUsers" class="hamburger-nav">
    <span class="floatingmenu_label">Users</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnJobs" class="hamburger-nav">
    <div class="floatingmenu_label">Jobs</div>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnFilters" class="hamburger-nav">
    <span class="floatingmenu_label">Filters</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnReports" class="hamburger-nav">
    <span class="floatingmenu_label">Reports</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>

Javascript / JQuery :

  $('#hamburger').click(function() {
    $('#hamburger').toggleClass('show');
    $('.hamburger-nav').toggleClass('show');
  });

CSS :

.floatingmenu_label {
  width: 150px;
  text-align: right;
  padding-right: 10px;
  position: absolute;
  left: -160px;
  color: #454545;
  white-space: nowrap;
}

#btnExit.show {
  -webkit-transform: translateY(-125%);
  transform: translateY(-125%);
}

#btnUsers.show {
  -webkit-transform: translateY(-250%);
  transform: translateY(-250%);
}

#btnJobs.show {
  -webkit-transform: translateY(-375%);
  transform: translateY(-375%);
}

#btnReports.show {
  -webkit-transform: translateY(-500%);
  transform: translateY(-500%);
}

#btnFilters.show {
  -webkit-transform: translateY(-625%);
  transform: translateY(-625%);
}

#hamburger {
  z-index: 10;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  bottom: 10%;
  right: 5%;
  background-color: #FF5722;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.3);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#hamburger .icon-bar {
  display: block;
  background-color: #FFFFFF;
  width: 22px;
  height: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger .icon-bar+.icon-bar {
  margin-top: 4px;
}

.hamburger-nav {
  z-index: 9;
  position: fixed;
  bottom: 10.5%;
  right: 5.5%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f9f9f9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  visibilty: hidden;
  opacity: 0;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#hamburger.show {
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.48);
}

#hamburger.show #wrapper {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

#hamburger.show #one {
  -webkit-transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
  transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
}

#hamburger.show #two {
  opacity: 0;
}

#hamburger.show #thr {
  -webkit-transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
  transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
}

.hamburger-nav.show {
  visibility: visible;
  opacity: 1;
}

目前为止一切正常。

但是当我添加 bootstrap.css css 时，它变得一团糟。

<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css" type="text/css">

这是一个 fiddle，但它现在有问题。要使其正常工作，只需删除左侧的 bootstrap.min.css：Fiddle

任何人都可以帮助我完成这项工作同时包含 bootstrap.css 吗？

提前致谢！

工作：

不工作：

编辑：终于找到了罪魁祸首：

在 bootstrap.css 中有这个 class :

.show {
  display: block !important;
}

这超越了我的 class。我只是简单地重命名了我的 class，然后一切又恢复正常了。在 Chrome 中，右键单击元素（按钮）-> 检查元素 -> 样式选项卡显示影响所选元素的每个 class。很有用！

Answer 1

我认为在 Bootstrap CSS 之上编写自定义 CSS 代码始终是一个好习惯。

有几种方法可以解决此问题，可以完全通过 CSS 或添加一些 HTML 包装器然后应用 CSS。我会给你纯粹的CSS解决方案。

要使子元素相对于父元素居中，请使用

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

如果将此应用到 .hamburger-menu > img 和 #hamburger > #wrapper，您最终会得到想要的结果。

编辑：与文本标签的情况相同，只是您只想在 Y 轴上而不是 X 轴上进行变换。

浮动操作菜单不适用于 Bootstrap CSS

Floating Action Menu not working with Bootstrap CSS

css

jquery

floating-action-button

bootstrap-4