gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:51:32 26 4
gpt4 key购买 nike

<分区>

我用的是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/

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com