调整屏幕大小时,bootstrap 4导航栏消失

Question

我使用angular 2和bootstrap 4,navbar主页上有一个,但是当我将页面缩小到小于1000px时,文本就navbar消失了.

这是我的代码:

 <nav class="navbar navbar-expand-lg navbar-dark bg-info" style="padding: 1px; width: 100%">
    <!-- <a class="navbar-brand" routerLink='/index' style="padding-right: 5px">
    </a> -->
    <div class="navbar-inner">
      <div class="container">

        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
        <!-- Be sure to leave the brand out there if you want it shown -->
        <!-- <a class="brand" href="#">Project name</a> -->

        <div class="collapse navbar-collapse" >
          <div class="navbar-nav mr-auto" id="navbarNavAltMarkup">
            <a class="nav-link navLink" routerLink="/index" routerLinkActive="active"><h5>Introduction</h5></a>
            <a class="nav-link navLink" routerLink="/analysis" routerLinkActive="active"><h5>Analysis</h5></a>
            <a class="nav-link navLink" routerLink="/help" routerLinkActive="active"><h5>Help</h5></a>
            <a class="nav-link navLink" routerLink="/faq" routerLinkActive="active"><h5>FAQs</h5></a>
            <a class="nav-link navLink" routerLink="/demo" routerLinkActive="active"><h5>Demo</h5></a>
            <a class="nav-link navLink" href="http://www.zhulab.cn" routerLinkActive="active"><h5>ZhuLab</h5></a>
          </div>
        </div>
      </div>
    </div>
  </nav>

你可以从https://angular-ymfn5q.stackblitz.io/看到它,

这是代码:https://stackblitz.com/edit/angular-ymfn5q？file = app%2Fapp.component.html

我尝试过这种方法,在调整屏幕大小时,bootstrap折叠菜单消失,但似乎对我不起作用.

我想要这样的东西:https://jsfiddle.net/65KdX/1/

任何人都可以给我一个帮助,非常感谢!

Answer 1

当然它会消失.该navbar-expand-lg班告诉它消失了比小屏幕lg.并且你没有任何地方的导航栏切换器.这是所有预期的行为.

在这里看一下工作导航栏的结构:

https://getbootstrap.com/docs/4.0/components/navbar/

该navbar-toggler啄是当出现什么navbar-expand-*类的东西可以消失.

而collapse navbar-collapse类分不清哪里那些消失的东西都躲在toggler.(我在这里使用了一些松散的术语)

但是要小心container-fluid班级.因为那个吸盘会在整个屏幕上拉伸你的导航栏,那些拥有4K宽广场景的人会为此而讨厌你.请container改用.