Question

这可能是Bootstrap v4中的一个简单的CSS更改，但停留在确切更改的位置。

我在引导程序中有一个导航栏，所有内容都可以在桌面屏幕上使用。但是，当涉及到移动屏幕时，我们会看到一个按钮，如果我单击该按钮，菜单就会消失。

这里的问题与菜单一起出现，徽标向右，其他菜单（欢迎，U，H，L（这些是图像））也出现，这是不正确的。

如果更改了屏幕尺寸，如何固定以上徽标和后续菜单而不进行更改？

任何帮助将不胜感激。

.navbar {
    height: auto;
    padding: 0px;

} 
.logoStyle {
    background-image: url(../../assets/images/logo.png);
    background-position: -15px 6px;
    background-repeat: no-repeat;
    background-size: auto 40px;
    margin-left: 18px ;
    padding: 11px 0 0 30px;
    height: 43px !important;
    }

    .active{
        text-decoration: underline;
    }

.navbar-brand {
    margin-right: 10px !important;    
}
.nav-item {
    margin-top: 5px;
}

.logout{
    background-image: url(../../assets/images/logo.png);
    float: right;
    height: 30px;
    width: 40px;
}

.dashboard {
    background-image: url(../../assets/images/dashactive.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.worklist {
    background-image: url(../../assets/images/worklist.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.userhistory {
    background-image: url(../../assets/images/tickets.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.user {
    background-image: url(../../assets/images/user.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.help {
    background-image: url(../../assets/images/help.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.logout {
    background-image: url(../../assets/images/logout.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

 .user-logged span {
    color: #fff;
}
.welcomeTxt{
    font-size: 14px;
    color: #fff;
    position: relative;
    top: -8px;
}

.user-head {
    padding-left: 10px;
}

.user-head a {
    margin-right: 0px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"/></script>

<body>

	<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">        
			<span class="navbar-toggler-icon"/>
		</button>
		<h1 class="navbar-brand logoStyle">vTM</h1>
		<div class="collapse navbar-collapse" id="navbar-list-2">
			<ul class="navbar-nav">
				<li class="nav-item active">
					<a class="nav-link navbar-brand dashboard" routerLink="/dashboard" routerLinkActive="active">Dash</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-brand worklist" routerLink="/worklist" routerLinkActive="active">Work</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-brand userhistory" routerLink="/userhistory" routerLinkActive="active">User</a>
				</li>
			</ul>
		</div>
		<span class="user-logged">
			<span class="welcomeTxt">Welcome </span>
			<span class="user-head">
				<a class="navbar-brand user">U</a>
				<a class="navbar-brand help">H</a>
				<a class="navbar-brand logout">L</a>
			</span>

		</span> 
	</nav>
</body>

JSFIDDLE

Answer 1

用position:absolute添加media query

@media(max-width:576.9px){
  .navbar-collapse{
    position: absolute;
    left: 0px;
    top: 50px;
    background: rgb(52, 58, 64) none repeat scroll 0% 0%;
    width: 100%;
  }
}

https://jsfiddle.net/lalji1051/3ako7h82/3/

如何使用bootstrap崩溃而不影响其他元素？

1 个答案: