首页 > 解决方案 > Angular 中的引导导航栏 dissaperas

问题描述

出于某种原因,当我从移动设备访问我的应用程序时,我的导航栏消失了。调整大小时在桌面上可以正常工作,但在我的手机上却不行。有人知道为什么吗?

导航栏组件:

<div class="nav-wrapper">
    <div class="container nav-container">
        <nav class="navbar navbar-expand-md">
            <button class="navbar-icon justify-content-start" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                <svg width="45" height="45" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path stroke="#ffffff" fill="#ffffff" stroke-width="0.01" stroke-opacity="null" fill-opacity="null" d="m22.50075,7.58411c-0.75562,0 -1.49925,0.04296 -2.23088,0.12334l-0.05397,-0.24945c-0.03148,-0.14413 -0.08996,-0.2744 -0.16792,-0.3922c0.57121,-0.42684 0.93703,-1.07819 0.93703,-1.80992c0,-1.28468 -1.12594,-2.32546 -2.51574,-2.32546s-2.51574,1.04077 -2.51574,2.32546c0,1.03246 0.72713,1.90693 1.73463,2.21043c-0.03148,0.14552 -0.03148,0.29934 0,0.45456l0.04947,0.23144c-7.99399,1.94712 -13.89054,8.67403 -13.89054,16.67592c0,9.52217 8.35231,17.24135 18.65365,17.24135c10.30134,0 18.65215,-7.71918 18.65215,-17.24135c0.0015,-9.52355 -8.35082,-17.24412 -18.65215,-17.24412zm0.32234,4.10904c6.67915,0 12.26835,4.3183 13.67765,10.09868l-0.86357,0.32429c-0.22189,-0.94376 -1.13193,-1.65055 -2.21889,-1.65055c-1.25487,0 -2.27286,0.94099 -2.27286,2.10095c0,0.10394 0.01199,0.2051 0.02699,0.30627l-4.15442,-0.0388c-0.08096,-0.15937 -0.17091,-0.3132 -0.27286,-0.46149l5.09595,-7.08169l0.08246,-0.11503l-7.14542,5.62516c-0.52774,-0.21758 -1.10944,-0.34369 -1.72114,-0.35478l0.12893,-0.02495l-1.76462,-3.58242c0.95952,-0.2453 1.66567,-1.0574 1.66567,-2.02195c0,-1.15995 -1.01649,-2.09956 -2.27286,-2.09956c-0.11244,0 -0.22039,0.0097 -0.32834,0.02495l0.08696,-0.87863c0.73313,-0.11364 1.48426,-0.17046 2.25037,-0.17046zm-6.33133,-6.43727c0,-1.00751 0.88606,-1.82655 1.97601,-1.82655c1.08995,0 1.97601,0.81904 1.97601,1.82655c0,0.58898 -0.30435,1.11145 -0.77361,1.44544c-0.27436,-0.17046 -0.61919,-0.24391 -0.97001,-0.18016c-0.33883,0.06236 -0.61919,0.24114 -0.8021,0.48366c-0.81259,-0.22728 -1.4063,-0.92575 -1.4063,-1.74894zm-7.68964,19.39773c0,-6.15733 4.64467,-11.31268 10.87255,-12.6334l0.44528,0.79409c-0.91454,0.27163 -1.57571,1.06433 -1.57571,1.99839c0,1.15996 1.01649,2.10095 2.27136,2.10095c0.10195,0 0.2024,-0.00831 0.29985,-0.02079l-0.08696,3.94274l0.07796,-0.01524c-0.66267,0.28271 -1.23538,0.71094 -1.67316,1.24033l0.13943,-0.20372l-2.35982,-0.83567l1.75712,1.71707l0.03898,-0.05821c-0.28486,0.51415 -0.45877,1.09205 -0.48576,1.70321l-0.0045,-0.02217l-3.93253,1.67549c-0.29835,-0.83705 -1.14993,-1.44267 -2.15592,-1.44267c-1.25487,0 -2.27286,0.93961 -2.27286,2.10095c0,0.08869 0.0075,0.17739 0.01949,0.2647l-1.17391,-0.10532c-0.13193,-0.7151 -0.2009,-1.4496 -0.2009,-2.20073zm14.02097,12.96184c-6.64017,0 -12.20088,-4.26564 -13.65216,-9.99336l1.03598,-0.4892c0.21889,0.95069 1.12893,1.66302 2.22189,1.66302c1.25487,0 2.27136,-0.94099 2.27136,-2.10095c0,-0.14551 -0.01649,-0.28687 -0.04648,-0.42546l4.28485,0.04158c0.06747,0.13166 0.14393,0.25915 0.22489,0.38249l-5.17241,7.31312l0.34033,-0.27024l6.7901,-5.43253c0.50375,0.21204 1.05697,0.34369 1.64018,0.36864l-0.02848,0.00554l1.83808,3.64063c-0.98201,0.23005 -1.71214,1.05324 -1.71214,2.03443c0,1.15995 1.01649,2.09956 2.27286,2.09956c0.11394,0 0.22639,-0.0097 0.33733,-0.02495l0.006,0.95346c-0.85757,0.15244 -1.74363,0.23421 -2.65217,0.23421l0,0zm3.43778,-0.39358l-0.58321,-0.83151c0.991,-0.22728 1.72713,-1.05186 1.72713,-2.0372c0,-1.15996 -1.01949,-2.10095 -2.27286,-2.10095c-0.09895,0 -0.1949,0.00693 -0.28935,0.0194l0,-3.96353l-0.03748,0.00554c0.61319,-0.25638 1.15442,-0.6361 1.58171,-1.10591l2.27286,0.91328l-1.65517,-1.80715c0.23688,-0.46426 0.38381,-0.97564 0.41679,-1.5175l3.82608,-1.61313c0.28486,0.85646 1.14842,1.48009 2.16941,1.48009c1.25637,0 2.27286,-0.94099 2.27286,-2.10095c0,-0.09562 -0.00899,-0.18986 -0.02399,-0.28271l0.97451,0.1663c0.13343,0.71648 0.2039,1.45376 0.2039,2.20489c0.0015,6.06447 -4.50075,11.1547 -10.5832,12.57103z" id="svg_18"/>
                    </g>
                </svg>
            <small class="text-white nav-icon-text">Meny</small>
        </button>
            <div class="navbar-collapse collapse justify-content-end" id="collapsingNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-white" routerLink="/home">Hem</a> 
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" id="login" routerLink="{{loginRout}}">{{loginStateText}}</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div> 

标签: angulartwitter-bootstrap

解决方案


我认为它并没有消失。由于类 navbar-collapse 崩溃,它在断点处崩溃。从 Bootstrap 文档中,这两个类用于 -

.collapse.navbar-collapse 用于按父断点分组和隐藏导航栏内容。


推荐阅读