浮動操作菜單沒有與引導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軸上進行轉換。