在移动设备中查看时带有侧边栏的 Bootstrap 导航栏
Posted
技术标签:
【中文标题】在移动设备中查看时带有侧边栏的 Bootstrap 导航栏【英文标题】：Bootstrap Navbar with a side bar when viewed in mobile 【发布时间】：2018-01-20 18:28:00 【问题描述】：我正在为我的 Web 应用程序使用 Bootstrap Navbar，它运行良好。 使用这个LINK
它也是响应式的，这是我所需要的，但正如您所知，当屏幕尺寸减小并变为下拉菜单时，引导导航栏会变为汉堡图标。
类似
当我想创建一个侧导航栏时，我的意思是它应该显示像 materialize CSS LINK 这样的元素
我做了很多研究，得到了这个https://startbootstrap.com/template-overviews/simple-sidebar/
但是这里没有导航栏，它只是一个侧面导航栏，当屏幕尺寸缩小到移动设备时，我想要这个功能。
另外，我的引导导航栏菜单有下拉菜单，所以我不知道如何在侧导航 CSS 中处理它。请帮助我是 CSS 新手。
我不能实现 CSS，因为将所有引导程序更改实现为具体化的成本太高了。
如果使用纯 CSS 可以做到这一点，那简直是锦上添花。
提前致谢。
更新
这是我的导航栏
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" /></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>
【问题讨论】：
你到底想达到什么目的？ 您可以尝试为此使用 javascript 库。或者在引导程序中，此链接可能会对您有所帮助。 Check out here @JaysonJohn 我正在尝试在浏览器中查看页面时设置导航栏，并且当页面调整 nabvar 的大小时，nabvar 将成为可折叠的侧导航栏，就像引导导航栏上的菜单一样，而不是下拉应该是侧导航 【参考方案1】：如果没有错，您想使用引导程序实现移动设备的“滑动菜单”。这是一个可以用来达到目的的sn-p：
参考链接：https://bootsnipp.com/snippets/featured/navbar-lateral-slide-menu
示例 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：
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：
$(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');
);
);
【讨论】：
它可以与 bootstrap 一起使用吗？它不会覆盖任何其他设置，对吗？如果导航栏上有任何下拉菜单，它会处理任何下拉菜单吗？，因为在链接中导航栏只有一个属性，但如果它有像下拉菜单一样的效果 是的，它应该与 bootstrap 一样正常工作，试一试，如果遇到问题，请在此处评论。请不要忘记添加所有必要的 js/css 文件。 在我的情况下它不起作用整个应用程序的行为很奇怪你能检查更新我的导航栏吗？我想接受答案，但在我的情况下它不起作用我使用导航，因为它是你的 div案例请帮忙【参考方案2】：请。见
https://jsfiddle.net/fido3993/fk63zzbz/3/
我看到上面的评论
<!-- 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" />
</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
.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');
);
);
【讨论】：
如果导航栏上有菜单，它会处理导航栏中的下拉菜单吗？ 测试过了。它会 在我的情况下它不起作用整个应用程序的行为很奇怪你能检查更新我的导航栏吗？我想接受答案，但在我的情况下它不起作用我正在使用导航，因为它是 div 在你的情况下请帮助 我已经发布了关于它使用 bootstrap v4 的问题的整个 Nav 元素请帮助以上是关于在移动设备中查看时带有侧边栏的 Bootstrap 导航栏的主要内容，如果未能解决你的问题，请参考以下文章
带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单
仅在折叠位置时如何设置 Bootstrap 5 导航栏的样式？