浮动操作菜单没有与引导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; 
} 

这很好，所以f AR。

但是，当我添加bootstrap.css css它会搞砸。

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

这里是一个小提琴，但它现在工作马车。为了使它正常工作，只需删除左侧的bootstrap.min.css：Fiddle

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

在此先感谢！

工作：

不工作：

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

在bootstrap.css有这个类：

.show { 
    display: block !important; 
} 

是不顾我的班。我只是重新命名我的课，一切都很好。 在Chrome中，右键单击元素（按钮） - >检查元素 - >样式选项卡显示影响所选元素的每个类。很有用 ！

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轴上进行转换。