我正在使用Bootstrap创建导航栏。当我在大屏幕上查看我的页面时,它完美地工作。但是,当我尝试缩小到更小的屏幕时,导航栏变高,左侧的品牌图标和名称与右侧的li项目不在同一行上。我的html或css代码有什么问题会导致这个问题?提前谢谢你。bootstrap导航栏项目在较小的屏幕上未正确对齐
这里是我的HTML代码:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Left side -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<span class="logo"><img src="logo_example.png"/></span>
<h4 class="navbar-text">My Website</h4>
</a>
</div>
<!-- Right side -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</i></a></li>
<li><a href="login.html">Login</i></a></li>
</ul>
</div>
</div>
</nav>
这里是我的CSS代码
.navbar-brand {
margin: 0;
padding: 0;
width: 1000px;
}
.navbar-brand img {
max-height: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
span img {
float: left;
}
Here is an image of what I am talking about.
我甚至没有想到!谢谢。我感谢帮助! – Mayakanai65