更改sidenav视图

Question

大家好，我是bootstrap的新手，我已经创建了一个具有折叠功能的导航栏。我想在移动视图中，当我点击切换按钮时，导航栏从右边出来。请给我看一些javascript或jquery来实现这个功能。

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">Logo</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Our Story</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Signin</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn btn-success text-white" href="#">Get Started</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

Answer 1

尝试添加此Css：

@media (max-width: 992px) {
    
    .navbar-collapse.collapsing .navbar-nav {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -45%;
        transition: all 0.2s ease;
    }

    .navbar-collapse.show .navbar-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        flex-direction: column;
        height: auto;
        width: 45%;
        transition: left 0.35s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}