如何将bootstrap4导航栏转换为移动侧边栏? [英] how to convert bootstrap4 navbar to sidebar for mobile?

问题描述

我有一个引导程序4导航栏(例如默认导航栏，该导航栏从上到下进行排序).现在想要的是，我想将此导航栏转换为移动版的侧边栏. 我想要这样的东西 到目前为止我的代码:

i have a bootstrap 4 navbar( like the default navbar which collpase from top to bottom). Now what is want is, i want to convert this navbar into a sidebar for mobile version. i want something like this my code so far:

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top mb-4">
        <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='dist/img/web3.svg') }}" alt="Example Navbar 1" class="mr-2" height="30"></a>
        <a class="navbar-brand"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-7" aria-controls="navbarNavDropdown-7" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown-7">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{{ url_for('home') }}" style="font-size:18px;">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('my_dashboard') }}" style="font-size:18px;">Dashboard</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{{ url_for('getting_feedback')}}">Feedback</a>
                    <a class="dropdown-item" href="{{ url_for('donate_books') }}">Donate books</a>
                    <a class="dropdown-item" href="{{ url_for('requesting_for_books') }}">Request books</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{{ url_for('about_page') }}">About</a>
                    <a class="dropdown-item" href="{{ url_for('about_page') }}">Blog</a>
                </div>
                </li>
            </ul>
            <div class="ml-auto">
                {% if session['username'] %}
                <ul>
                    <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img src="{{ url_for('static', filename='dist/img/iam.png') }}" alt="" height="27">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right"
                                aria-labelledby="navbarDropdownMenuLink-333">
                                <a class="dropdown-item" href="{{ url_for('my_dashboard') }}"><img src="{{ url_for('static', filename='dist/img/user3.png') }}" alt="" height="20" class="pr-2">Account</a>
                                <a class="dropdown-item" href="{{ url_for('logging_user_out') }}"><img src="{{ url_for('static', filename='dist/img/exit-door.png') }}" alt="" height="20" class="pr-2">Log out</a>
                            </div>
                </li>
            </ul>
                {% else %}
                <span>
                    <a class="btn btn-outline-primary btn-pill mx-auto my-auto" href="#" data-toggle="modal" data-target="#modalLoginForm">Sign in</a>
                </span>
                {% endif %}
            </div>
        </div>
    </nav>

推荐答案

此问题与以下内容非常相似: ..您必须实现自定义边栏.

This question is very similar to: Create a responsive navbar sidebar "drawer" in Bootstrap 4? .. you have to implement a custom sidebar.

正如所解释的，移动侧边栏会变得很复杂，因为存在许多 变体(推送，覆盖，自动折叠，可切换，图标等)，这很可能是Bootstrap不提供的原因有侧边栏组件.

As explained, mobile sidebars can get complicated because there are many variations (push, overlay, auto-collapse, toggleable, icons, etc..) which is most likely the reason Bootstrap doesn't have sidebar component.

使用CSS @media查询在移动设备上重新定位导航栏:
https://codeply.com/p/44bz8AG2EO

Use a CSS @media query to re-position the Navbar on mobile:
https://codeply.com/p/44bz8AG2EO

/* navbar becomes mobile sidebar under lg breakpoint */
@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;
        left: 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);
    }
}

或者，另一种选择是使用Bootstrap 4模式作为侧边栏，但这也需要自定义位置和重复内容:
https://www.codeply.com/p/LYPEZ5IRHH

Or, another option is to use the Bootstrap 4 modal as a sidebar but this also requires custom positioning and duplicate content:
https://www.codeply.com/p/LYPEZ5IRHH

这篇关于如何将bootstrap4导航栏转换为移动侧边栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！