Bootstrap 4：获取主菜单容器的全宽下拉菜单

时间：2019-05-18 03:56:39

标签： css angular twitter-bootstrap bootstrap-4

我希望所有菜单从初始位置开始显示下拉菜单，并保持600px的宽度。

因此，即使我尝试打开说Main Menu 2或Main Menu 3或Main Menu 4的下拉菜单，下拉菜单也应从Main Menu 1位置开始。这是我为了更好地理解而制作的屏幕。 enter image description here

PS：这是在ng-Bootstrap 4上，因此是一些与Angular相关的代码。另外，这是生成的HTML。

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div class="d-inline-block dropdown" ngbdropdown="">
      <button aria-haspopup="true" class="nav-link btn btn-link text-uppercase dropdown-toggle" id="dropdownBasic0" ngbdropdowntoggle="" aria-expanded="false">Main Menu 1</button>
      <div aria-labelledby="dropdownBasic0" ngbdropdownmenu="" class="dropdown-menu" x-placement="bottom-left">
        <div class="" ngbdropdownitem="">
          <div class="row">
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 1</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu A</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu B</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu C</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 2</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu D</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu E</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 3</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu F</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu G</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu H</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div class="d-inline-block dropdown" ngbdropdown="">
      <button aria-haspopup="true" class="nav-link btn btn-link text-uppercase dropdown-toggle" id="dropdownBasic1" ngbdropdowntoggle="" aria-expanded="false">Main Menu 2</button>
      <div aria-labelledby="dropdownBasic1" ngbdropdownmenu="" class="dropdown-menu" x-placement="bottom-left">
        <div class="" ngbdropdownitem="">
          <div class="row">
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 1</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu A</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu B</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu C</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu D</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu E</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 2</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu F</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu G</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu H</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu I</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu J</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu K</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu L</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 3</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu M</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu N</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu O</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

这是Angular代码：

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic0"
              ngbDropdownToggle>Main Menu 1</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic0">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic1"
              ngbDropdownToggle>Main Menu 2</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-12">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
              <a routerLink="/">Sub Menu 4</a>
              <a routerLink="/">Sub Menu 5</a>
              <a routerLink="/">Sub Menu 6</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic2"
              ngbDropdownToggle>Main Menu 3</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-6">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-6">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

1 个答案:

答案 0 :(得分：1)

由于您正在使用ngbDropdown-我考虑过要解决Angular中的问题；

  • 我使用的是BS4类，而不是固定的600px宽度，因此我们得到了一种响应性的解决方案，其中50％的宽度用于徽标，另50％的宽度用于导航按钮
  • 由于我们必须将下拉菜单的内容从切换按钮下方的默认位置（现在在SB中注释）中移开，所以我们必须自己管理切换效果；
  • 也做了一些造型以获得我们想要的效果
  • 您可以看到一个working demo here

相关的 HTML 代码：

<div class="row">
    <div class="col-6">
        LOGO AREA
    </div>

    <div class="col-3 ">
        <div ngbDropdown class="fullWidth">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="toggleShow1()">dropdown1</button>
    </div>
  </div>

  <div class="col-3 ">
    <div ngbDropdown  class="fullWidth">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle (click)="toggleShow2()">dropdown2</button>
    </div>
  </div>
  </div>
  <div class='row'>
    <div class='col-6'>
    </div>
    <div class='col-6'>
      <div class='dropdown-menu show' *ngIf="show1" >
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
      <div class='dropdown-menu show' *ngIf="show2">
        <button ngbDropdownItem>Action - 2</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
</div>

相关的 TS 代码：

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html',
  styles: [`
  .fullWidth .btn {width:100%;}
  .dropdown-menu.show{ position: initial; width: inherit;}
  `]
})
export class NgbdDropdownBasic {
  show1: boolean = false;
  show2: boolean = false;

  toggleShow1() {
    if (this.show1) { this.show1 = false; }
    else {
      this.show1 = true;
      (this.show2) ? this.show2 = false : '';
    }
  }

  toggleShow2() {
    if (this.show2) { this.show2 = false }
    else {
      this.show2 = true;
      (this.show1) ? this.show1 = false : '';
    }
  }

}
相关问题
最新问题