【发布时间】：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。
【问题讨论】：
标签： html css angular twitter-bootstrap sass