twitter-bootstrap 在移动设备中查看时带有侧边栏的 Bootstrap Navbar
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45648720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar with a side bar when viewed in mobile
提问by INFOSYS
I am using Bootstrap Navbar for my web application and it works fine. Using this LINK
我正在为我的 Web 应用程序使用 Bootstrap Navbar，它工作正常。使用此链接
It is also responsive and that what I need but as you know the bootstrap navbar changes to hamburger icon when screen size reduces and changes to a drop down.
它也是响应式的，这是我所需要的，但正如您所知，当屏幕尺寸减小并更改为下拉菜单时，引导程序导航栏会更改为汉堡包图标。
Something like this 
像这样的东西
Where as I want to create a side navbar, by side nav I mean it should display elements like in materialize CSS LINK
当我想创建一个侧面导航栏时，侧面导航我的意思是它应该显示像 materialize CSS LINK这样的元素
I did a lot of research and got this https://startbootstrap.com/template-overviews/simple-sidebar/
我做了很多研究，得到了这个https://startbootstrap.com/template-overviews/simple-sidebar/
But here there is not navbar up top it's just a side navbar where as I want this feature when the screen size reduces to mobile.
但是这里顶部没有导航栏，它只是一个侧面导航栏，当屏幕尺寸减小到移动时，我想要这个功能。
Also, my bootstrap navbar menu has drop downs so I don't know how to handle that in side nav CSS. Please help I am a novice in CSS.
另外，我的引导导航栏菜单有下拉菜单，所以我不知道如何在侧边导航 CSS 中处理它。请帮助我是 CSS 新手。
I cannot go for materialize CSS as the cost of making all the bootstrap changes to materialize is way to much.
我不能选择实现 CSS，因为进行所有引导程序更改以实现实现的成本非常高。
And if this is possible using plain CSS it's like icing on cake.
如果使用纯 CSS 可以做到这一点，那就是锦上添花。
Thanks in advance.
提前致谢。
UPDATE
更新
here is my nav bar
这是我的导航栏
nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive">
<span class="navbar-toggler-icon"></span>
</button>
<a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
<div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
<ul class="navbar-nav">
<li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Basic Concepts
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a [routerLink]="['/a4']" class="dropdown-item">Angular Component</a>
<a [routerLink]="['/cli']" class="dropdown-item">Angular CLI</a>
<a [routerLink]="['/inout']" class="dropdown-item">Event Emitters</a>
<a class="dropdown-item" [routerLink]="['/template']">Template Driven Forms</a>
<a class="dropdown-item" [routerLink]="['/reactive']">Reactive Forms</a>
<a class="dropdown-item" [routerLink]="['/directives']">Angular Custom Directives</a>
<a class="dropdown-item" [routerLink]="['/pipes']">Custom Pipes</a>
<a class="dropdown-item" [routerLink]="['/viewchild']">View Child</a>
<a class="dropdown-item" [routerLink]="['/view']">View Encapsulation</a>
</div>
</li>
<li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Advanced Concepts
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
<a class="dropdown-item" [routerLink]="['/ngrx']">Angular Redux using ngrx/store</a>
<a class="dropdown-item" [routerLink]="['/guard']">Angular Guards</a>
<a class="dropdown-item" [routerLink]="['/host']">Host & Host-Context</a>
<a class="dropdown-item" [routerLink]="['/dynamic']">Dynamic Component</a>
</div>
</li>
<li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Additional
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" [routerLink]="['/charts']">Angular + HighCharts</a>
<a class="dropdown-item" [routerLink]="['/firebase']">FireBase Functions</a>
<a class="dropdown-item" [routerLink]="['/myworks']">My Angular Projects</a>
</div>
</li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['/comment']">Comments</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['/faq']"><strong>F.A.Q</strong></a>
</li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" (click)="openDialog()">Contact Card</a>
</li>
</ul>
</div>
</nav>
回答by Sumit Badaya
If am not wrong, you want to achieve "sliding menu" for mobile using bootstrap. Here is a snippet you can use to achieve the purpose:
如果没有错，您想使用引导程序为移动设备实现“滑动菜单”。这是您可以用来实现目的的片段：
Reference link: https://bootsnipp.com/snippets/featured/navbar-lateral-slide-menu
参考链接：https: //bootsnipp.com/snippets/featured/navbar-lateral-slide-menu
Example HTML:
示例 HTML：
<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="navbar-inverse side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#Home">Home</a></li>
<li><a href="#users">Users</a></li>
<li><a href="http://placesforlove.com">Places</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<div class="row">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
</div>
</div>
CSS:
CSS：
body {
padding-top: 50px;
position: relative;
}
pre {
tab-size: 8;
}
@media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.side-collapse {
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse.in {
width:0;
}
}
JS:
JS：
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
回答by user8256287
Pls. see
请。看
I see on above comment
我在上面的评论中看到
HTML
HTML
<!-- Navigation -->
<div class="navbar navbar-default navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="logo">
<img src="images/logo_white.png" class="logo" alt="logo"/>
</div>
</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- End Navigation-->
CSS
CSS
.indexcity {
z-index: 9999;
}
.right {
right: 0 !important;
left: 0 !important;
}
@media only screen and (max-width: 767px) {
.navbar-collapse{
background-color:#ffc107;
position: fixed;
top: 0;
transition:all 0.8s ease-out;
height: 100%;
width: 100%;
left: 700px;
}
.navbar-inverse .navbar-nav>li>a {
color: #000;
}
}
JQUERY
查询
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
});
});
