使用 Bootstrap 4 一个一个折叠的导航栏元素

Posted 2023-03-05

【中文标题】使用 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">[e-mail]</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 代码。不想用这种方式给你建议，这是一个肮脏的黑客行为。