如何将 bootstrap4 导航栏转换为移动侧边栏?
[英] how to convert bootstrap4 navbar to sidebar for mobile?
本文介绍了如何将 bootstrap4 导航栏转换为移动侧边栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 bootstrap 4 导航栏(就像从上到下折叠的默认导航栏).现在想要的是，我想将此导航栏转换为移动版本的侧边栏.我想要这样的东西 到目前为止我的代码:
<a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='dist/img/web3.svg') }}"alt=示例导航栏 1"；类=mr-2"高度＝30"</a><a class="navbar-brand"></a><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=#navbarNavDropdown-7"；aria-controls="navbarNavDropdown-7";aria-expanded="false";aria-label =切换导航"><span class="navbar-toggler-icon"></span><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;">首页<span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link";href={{ url_for('my_dashboard') }}";style="font-size:18px;">仪表板</a><li class="nav-item dropdown"><a class="nav-link";href=#"id="navbarDropdown";角色=按钮"数据切换=下拉"aria-haspopup="true";aria-expanded="false"><i class="fas fa-ellipsis-h"</i></a><div class="下拉菜单";aria-labelledby="navbarDropdown"><a class="dropdown-item";href={{ url_for('getting_feedback')}}">反馈</a><a class="dropdown-item";href={{ url_for('donate_books') }}">捐赠书籍</a><a class="dropdown-item";href={{ url_for('requesting_for_books') }}">索取书籍</a><div class="dropdown-divider"></div><a class="dropdown-item";href={{ url_for('about_page') }}">关于</a><a class="dropdown-item";href={{ url_for('about_page') }}">博客</a> <div class="ml-auto">{% if session['用户名'] %}<ul><li class="nav-item dropdown"><a class="nav-link dropdown-toggle";id="navbarDropdownMenuLink-333";数据切换=下拉"aria-haspopup="true";aria-expanded="false"><img src="{{ url_for('static', filename='dist/img/iam.png') }}";alt="高度=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="高度=20"class=pr-2">帐户</a><a class="dropdown-item";href={{ url_for('logging_user_out') }}"><img src={{ url_for('static', filename='dist/img/exit-door.png') }}";alt="高度=20"class=pr-2">注销</a>
{％ 别的 ％}<跨度><a class="btn btn-outline-primary btn-pill mx-auto my-auto";href=#"数据切换=模态"data-target=#modalLoginForm">登录</a></span>{％ 万一 ％}
</nav>
解决方案
这个问题非常类似于:创建一个响应式导航栏侧边栏抽屉"在 Bootstrap 4 中? .. 你必须实现一个自定义侧边栏.
如前所述，移动侧边栏可能会变得复杂，因为有许多变化(推送、覆盖、自动折叠、可切换、图标等)，这很可能是 Bootstrap 不支持的原因有侧边栏组件.
使用 CSS @media 查询在移动设备上重新定位导航栏:https://codeply.com/p/44bz8AG2EO
/* 导航栏变成lg断点下的移动侧边栏*/@media(最大宽度:992px){.navbar-collapse.collapsing .navbar-nav {显示:块；位置:固定；顶部:0；底部:0；左:-45%；过渡:全0.2s缓动；}.navbar-collapse.show .navbar-nav {位置:固定；顶部:0；底部:0；左:0；弹性方向:列；高度:自动；宽度:45%；过渡:左 0.35s 缓和；box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}}或者， 另一种选择是使用 Bootstrap 4 模式作为侧边栏，但这也需要自定义定位和重复内容:https://codeply.com/p/LYPEZ5IRHH
或者， 如果导航栏没有折叠，可以将其更改为侧边栏像这样
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.
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.
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);
}
}
Or, another option is to use the Bootstrap 4 modal as a sidebar but this also requires custom positioning and duplicate content:https://codeply.com/p/LYPEZ5IRHH
Or, if the Navbar doesn't collapse, changing it to a sidebar can be done like this
这篇关于如何将 bootstrap4 导航栏转换为移动侧边栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
