如何使我的菜单响应Bootstrap导航

Question

好吧，所以我想让我的三维菜单响应适合的bootstrap导航菜单。目前它没有响应，所以当我在移动设备上看到它时，它覆盖了引导程序导航栏。我想要的是某种类型的CSS或HTML，以使菜单上的每个按钮响应缩小到导航栏的大小，一旦它在较小的设备上查看。

JS拨弄链接https://jsfiddle.net/ap3x6swe/

继承人我CSS

.block-menu { 
     display: block; 
     background: transparent; 
    } 

    .block-menu li { 
     display: inline-block; 
    } 

    .block-menu li a { 
     color: #666; 
     display: block; 
     text-decoration: none; 
     font-family: 'Fjalla One', sans-serif !important; 
     font-smoothing: antialiased; 
     text-transform: uppercase; 
     overflow: visible; 
     line-height: 18px; 
     font-size: 20px; 
     padding: 15px 10px; 
    } 

    /* animation domination */ 
    .three-d { 
     perspective: 200px; 
     transition: all .07s linear; 
     position: relative; 
     cursor: pointer; 
    } 
     /* complete the animation! */ 
     .three-d:hover .three-d-box, 
     .three-d:focus .three-d-box { 
      transform: translateZ(-25px) rotateX(90deg); 
     } 

    .three-d-box { 
     transition: all .3s ease-out; 
     transform: translatez(-25px); 
     transform-style: preserve-3d; 
     pointer-events: none; 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 

    /* 
     put the "front" and "back" elements into place with CSS transforms, 
     specifically translation and translatez 
    */ 
    .front { 
     transform: rotatex(0deg) translatez(25px); 
    } 

    .back { 
     transform: rotatex(-90deg) translatez(25px); 
     color: #ffe7c4; 
    } 

    .front, .back { 
     display: block; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     background: DarkGrey; 
     padding: 17px 10px; 
     color: white; 
     pointer-events: none; 
     box-sizing: border-box; 
    } 

继承人HTML

<ul class="block-menu" id="navmenu"> 
    <li><a href="/" class="three-d menu_nav" > 
     Home 
     <span aria-hidden="true" class="three-d-box img-responsive"> 
      <span class="front">Home</span> 
      <span class="back">Home</span> 
     </span> 
    </a></li> 
    <li><a href="pages/home.html" class="three-d menu_nav img-responsive"> 
     Artist 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Roster</span> 
      <span class="back">Roster</span> 
     </span> 
    </a></li> 

    <li><a href="pages/order.html" class="three-d menu_nav"> 
     Labels 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Labels</span> 
      <span class="back">Labels</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Music 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Music</span> 
      <span class="back">Music</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Videos 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Videos</span> 
      <span class="back">Videos</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Store 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Store</span> 
      <span class="back">Store</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Services 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Services</span> 
      <span class="back">Services</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Artist Resources 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Artist Resources</span> 
      <span class="back">Artist Resources</span> 
     </span> 
    </a></li> 
    <li><a href="/" class="three-d menu_nav"> 
     Contact Us 
     <span aria-hidden="true" class="three-d-box"> 
      <span class="front">Contact Us</span> 
      <span class="back">Contact Us</span> 
     </span> 
    </a></li> 

</ul> 

Answer 1

请检查此琴。我已经添加了bootstrap所有外部库，并改变了一点点结构。 [https://jsfiddle.net/ap3x6swe/3/][1]