[英]how to convert bootstrap4 navbar to sidebar for mobile?
i have a bootstrap 4 navbar( like the default navbar which collpase from top to bottom).我有一个 bootstrap 4 导航栏(就像从上到下折叠的默认导航栏)。 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?这个问题非常类似于: 在 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.如前所述,移动侧边栏可能会变得复杂,因为有很多变体(推送、覆盖、自动折叠、可切换、图标等),这很可能是 Bootstrap 没有侧边栏组件的原因。
Use a CSS @media query to re-position the Navbar on mobile:使用 CSS @media 查询在移动设备上重新定位导航栏:
https://codeply.com/p/44bz8AG2EO 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:或者,另一种选择是使用 Bootstrap 4 模式作为侧边栏,但这也需要自定义定位和重复内容:
https://codeply.com/p/LYPEZ5IRHH https://codeply.com/p/LYPEZ5IRHH
Or, if the Navbar doesn't collapse
, changing it to a sidebar can be done like this或者,如果导航栏没有
collapse
,可以像这样将其更改为侧边栏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.