Question

在此处找到垂直导航栏： Codeply

我的代码如下：

<html>
<body>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" crossorigin="anonymous">
        </head>
        <style>
    html, body {
        height: 100%;
    }

    .wrapper, .row {
        height: 100%;
        margin-left: 0;
        margin-right: 0;
    }

        .wrapper:before, .wrapper:after,
        .column:before, .column:after {
            content: "";
            display: table;
        }

        .wrapper:after,
        .column:after {
            clear: both;
        }

        #sidebar {
            background-color: #eee;
            padding-left: 0;
            float: left;
            min-height: 100%;
        }

        #sidebar .collapse.in {
            display: inline;
        }

        #sidebar > .nav > li > a {
            white-space: nowrap;
            overflow: hidden;
        }

        #main {
            padding: 15px;
            left: 0;
        }

         /*
         * off canvas sidebar
         * --------------------------------------------------
         */
            @media screen and (max-width: 768px) {
                #sidebar {
                    min-width: 44px;
                }

                #main {
                    width: 1%;
                    left: 0;
                }

                #sidebar .visible-xs {
                    display: inline !important;
                }

                .row-offcanvas {
                    position: relative;
                    -webkit-transition: all 0.4s ease-in-out;
                    -moz-transition: all 0.4s ease-in-out;
                    transition: all 0.4s ease-in-out;
                }

                .row-offcanvas-left.active {
                    left: 45%;
                }

                    .row-offcanvas-left.active .sidebar-offcanvas {
                        left: -45%;
                        position: absolute;
                        top: 0;
                        width: 45%;
                    }
            }


            @media screen and (min-width: 768px) {
                .row-offcanvas {
                    position: relative;
                    -webkit-transition: all 0.25s ease-out;
                    -moz-transition: all 0.25s ease-out;
                    transition: all 0.25s ease-out;
                }

                .row-offcanvas-left.active {
                    left: 3%;
                }

                    .row-offcanvas-left.active .sidebar-offcanvas {
                        left: -3%;
                        position: absolute;
                        top: 0;
                        width: 3%;
                        text-align: center;
                        min-width: 42px;
                    }

                #main {
                    left: 0;
                }
            }
    </style>
    <script>
        $('[data-toggle=offcanvas]').click(function () {
            $('.row-offcanvas').toggleClass('active');
            $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
        });
    </script>
    <div class="wrapper">
        <div class="row row-offcanvas row-offcanvas-left">
            <!-- sidebar -->
            <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
                <ul class="nav" id="menu">
                    <li><a href="#"><i class="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
                    <li><a href="#"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
                    <li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
                    <li><a href="#"><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
                    <li>
                        <a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
                        <ul class="nav nav-stacked collapse left-submenu" id="item1">
                            <li><a href="google.com">View One</a></li>
                            <li><a href="gmail.com">View Two</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-target="#item2" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
                        <ul class="nav nav-stacked collapse" id="item2">
                            <li><a href="#">View One</a></li>
                            <li><a href="#">View Two</a></li>
                            <li><a href="#">View Three</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></a></li>
                </ul>
            </div>
            <!-- /sidebar -->
            <!-- main right col -->
            <div class="column col-sm-9 col-xs-11" id="main">
                <p><a href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a></p>
                <p>
                    Main content...
                </p>
            </div>
            <!-- /main -->
        </div>
    </div>
</body>
</html>

Fiddle

我没有获得相同的功能。我的代码没有显示菜单下拉菜单的插入符号。此外，所有菜单项都具有超链接鼠标悬停效果，而原始样本没有。有人能帮助我理解我做错了吗？

由于

Answer 1

你只需要将bootstrap的版本更改为3.7.7，这是稳定的

使用此链接

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Bootstrap 4中的导航栏

1 个答案: