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

Question

好的，所以我正在尝试让我的 3d 菜单响应以适应引导导航菜单。现在它没有响应，所以当我在我的移动设备上看到它时，它会覆盖引导导航栏。我想要的是某种类型的 CSS 或 html，使菜单上的每个按钮在较小的设备上查看后响应缩小到导航栏的大小。

JS fiddle 链接 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

请检查这个 fiddle 。我添加了引导所有外部库并更改了一点结构。 [https://jsfiddle.net/ap3x6swe/3/][1]