Question

我不是前端开发人员所以我觉得很难，我的任务是为我的应用程序创建适当的菜单。我想在下面的图片中“抓住”来实现设计。

我发现使用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。

Answer 1

只需在标记中使用@media个查询即可。如果您的分辨率较低，那么您的项目将被display: none属性隐藏1200px。与768px相同。如果标记断开，您还可以输入自定义数字，直到达到某些默认引导断点（例如1121px）。

// $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

Navbar元素使用Boostrap 4逐个折叠

1 个答案: