使用 Bootstrap 4 一个一个折叠的导航栏元素
Posted
技术标签:
【中文标题】使用 Bootstrap 4 一个一个折叠的导航栏元素【英文标题】:Navbar elements collapsing one by one using Boostrap 4 【发布时间】:2018-09-21 00:40:03 【问题描述】:我不是前端开发人员,所以我觉得这很困难,我的任务是为我的应用程序创建合适的菜单。我想实现如下图所示的设计。
我发现使用 Boostrap 4(不允许 JQueries)创建这样的设计真的很困难。 这里最重要的是,左侧菜单必须是 bootstrap col-2 的响应大小。
所以问题是我希望在 XL 屏幕分辨率上将所有元素放在一个导航栏上,在大分辨率上,所有元素尽管左侧部分和搜索栏位于折叠菜单按钮的内部,并且搜索在中间和上扩展每个较低的分辨率折叠整个菜单(只留下徽标 + 应用程序名称,休息在折叠的菜单内)。使用标准折叠非常容易完成此任务的最后一部分。但是我不知道如何使它在上图中看起来像一个整体(尤其是从 xl 到 lg)。
任何帮助或提示,将不胜感激!
这就是我现在所拥有的(如果有任何代码质量方面的不便,请见谅)。
<div class="mb-3">
<nav class="navbar navbar-expand-lg bg-white fixed-top header shadowed-element pl-0">
<div class="container-fluid">
<a href="#" class="navbar-brand d-flex col-2 mr-1 pr-md-3">
<ng-container *ngIf="!!qweqw; then active else defaultView"></ng-container>
</a>
<button class="navbar-toggler navbar-light d-lg-none" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse menu-item col-10" id="navbarsExampleDefault">
<div class="col-lg-8 justify-content-start logo-right-border logo-left-border">
<ul class="navbar-nav mr-3 justify-content-between">
<li class="nav-item col-5">
<app-search-component [asdas]="(sadasdsa$ | async)" (search)="search($event)"></app-search-component>
</li>
<li class="nav-item">
<a id="zxczczccxz" class="nav-link nav-element nav-text"
[routerLink]="['/', 'dasfafa', dsffdsf]"
routerLinkActive="active">
'menu.asdadsadsdasads' | translate</a>
</li>
<li class="nav-item">
<a id="adsasdadsadsadsds" class="nav-link nav-element nav-text" routerLink="/adsadsadsadsasd"
routerLinkActive="active">
'menu.asdsdae' | translate</a>
</li>
<li class="nav-item">
<a id="asddsadsaasd" class="nav-link nav-element nav-text" routerLink="/sdaasdasasdn"
routerLinkActive="active">
'menu.sdffdsdfsdfs' | translate</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="navbar-nav justify-content-around">
<li class="nav-item">
<a id="adsadsadsads" class="nav-link nav-element nav-text" routerLink="/asddsaasdad"
routerLinkActive="active">
'menu.asdsadsadsa' | translate</a>
</li>
<li class="nav-item">
<a id="admin-tab" class="nav-link nav-element nav-text" routerLink="/admin" routerLinkActive="active">
'menu.link.dfggfdgdf' | translate</a>
</li>
<li class="nav-item dropdown mr-0 ml-2 cursor-when-over text-center prevent-wrapping">
<div class="dropdown-toggle" data-toggle="dropdown" href="#">
<div class="pull-left mt-3">
<i aria-hidden="true" class="fa fa-user fa-fw fa-lg justify-content-center"></i>
</div>
<div class="pull-right mt-2">
<div class="text-left">
<ul class="list-unstyled ml-1 small-font">
<li>
Name
</li>
<li>
Super User
</li>
</ul>
</div>
</div>
</div>
<ul class="dropdown-menu">
<li class="ml-3">
<span class="small-font">Name Surname</span>
</li>
<li class="ml-3">
<span class="small-font">name@company.com</span>
</li>
<li class="ml-3">
<span class="small-font"> ID</span>
</li>
<li class="ml-3">
<span class="small-font"> Name</span>
</li>
<li class="border-bottom">
</li>
<li class="m-1">
<div class="container-fluid">
<!--todo will need future implementation-->
<a href="#">
<span class="pull-left mr-1">Help</span>
<span class="pull-right ml-1"><i aria-hidden="true" class="fa fa-info-circle fa-fw"></i></span>
</a>
</div>
</li>
<li class="m-1">
<div class="container-fluid">
<a href="#">
<!--todo will need future implementation-->
<span class="pull-left mr-1">Sign Out</span>
<span class="pull-right ml-1"><i aria-hidden="true" class="fa fa-sign-out fa-fw"></i></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<ng-template #defaultView>
<a class="text-center" href="#">
sdfdfssdf
</a>
</ng-template>
<ng-template #active>
<ul class="list-inline mb-0 pl-0">
<li class="list-inline-item">
<div *ngIf="brand=='dfgdgf'">
<img src="">
</div>
<div *ngIf="brand=='fgdfgdfg'">
<img src="">
</div>
<div *ngIf="brand=='dfggfdfdg'">
<img src="">
</div>
</li>
<li class="list-inline-item pl-xl-3 ml-xl-2 pl-lg-0 ml-lg-1 pl-md-0 ml-md-0">
<b>sasdasdaasd</b>
</li>
</ul>
</ng-template>
如果有用信息,应用程序是使用 Angular 5 开发的。
编辑:我找到了一些 JQuery 代码,那里的人称之为 导航优先模式 - 如果我找到更多信息,我会在这里发布。
我知道有人问过这个问题,但它是3 years ago and without answer。
【问题讨论】:
【参考方案1】:只需在您的标记中使用@media
查询。当您越过分辨率时,1200px 您的项目将被display: none
属性隐藏。与 768 像素相同。如果标记在到达某些默认引导断点(例如 1121 像素)之前中断,您还可以输入自定义数字。
// $screen-lg is bootstrap variable, by default 1200px
// $screen-sm = 768px
.menu-item
@media (max-width: $screen-lg)
.nav-item
display: none
@media (max-width: $screen-sm)
.search-bar
display: none
【讨论】:
感谢您的回答,但我担心我的问题是错误的 - 我不想让元素消失,我希望它们像屏幕一样移动到右侧折叠菜单越来越紧。它们必须随时可用。但无论如何,谢谢 -> 我会编辑我的问题以使其更清楚。 不可能。您想在不同的 html 父标签之间移动按钮,这只有 JS 才有可能。解决方案可能是使用显示选项和媒体查询,但您需要在中心栏和折叠菜单中复制按钮 html 代码。不想用这种方式给你建议,这是一个肮脏的黑客行为。以上是关于使用 Bootstrap 4 一个一个折叠的导航栏元素的主要内容,如果未能解决你的问题,请参考以下文章