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 collapse menu disappears when resizing screen，但似乎对我不起作用。

我想要这样的事情：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类告诉交换者那些消失的东西藏在哪里。（我在这里使用了一些松散的术语）

但要注意container-fluid课程。因为那个吸盘会在整个屏幕上拉伸你的导航栏，那些拥有4K宽广场景的人会为此而讨厌你。请改用container。

Answer 2

您使用了navbar-expand-lg类，这意味着当屏幕与lg宽度匹配时它将展开导航栏，直到它将被折叠。

您可以根据需要使用navbar-expand（即navbar-expand（-sm | -md | -lg | -xl））

Answer 3

Try this,
I  have updated few classes in your code.

<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="padding: 1px; width: 100%">
    <div class="navbar-inner">
      <div class="container">
        <a class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" style="
    background: black;
">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

        <div class="navbar-collapse collapse" id="abc" aria-expanded="false" style="height: 1px;">
          <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>

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

3 个答案: