代码之家 › 专栏 › 技术社区 › Belter

调整屏幕大小时,bootstrap 4导航栏消失[重复]

bootstrap-4 angular html

Belter · 技术社区 · 7 年前

我使用angular 2和bootstrap 4 navbar 在主页上,但当我将页面缩小到小于1000px时 导航栏 消失。

这是我的代码:

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

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

3 回复 | 直到 7 年前

WebDevBooster 7 年前

它当然会消失。这个 navbar-expand-lg 类告诉它在小于 lg . 而且你在任何地方都没有导航栏切换器。这都是预期的行为。

在此处查看工作导航栏的结构:

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

这个 navbar-toggler thingy是当 navbar-expand-* 类让事物消失。

以及 collapse navbar-collapse 类告诉切换者那些消失的东西藏在哪里。(我在这里使用的术语有点松散)

小心 container-fluid 不过还是要上课。因为那个笨蛋会把你的导航栏拉到整个屏幕上,而那些拥有4K宽屏幕的人会因此而恨你。使用 container 相反

pradeep kumar 5 年前

您使用了navbar expand lg class,这意味着当屏幕与lg宽度匹配时,它将扩展navbar,直到其折叠。

您可以根据需要使用导航栏展开(即导航栏展开(-sm |-md |-lg |-xl))

-2

Ashish Joshi 7 年前

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>