我使用bootstrap构建网站。在正常视图中(在笔记本电脑上),徽标应位于右侧,菜单位于左侧。问题出现在移动视图中,菜单项出现在左侧,而我想要它们在右侧(在徽标下)。 移动视图上的菜单项始终仅指普通视图的导航对齐。
这是css文件和html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="logo"><a href="#">LOGO<img src="img/logob.png" alt=""></a></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
</div>
</nav>
html {
min-height: 100%;
}
body {
margin-bottom: 60px;
}
ul{ list-style:none;}
img{ max-width:100%;}
.logo{
float:right;
margin-bottom:4px;
margin-top:4px;
}
.nav{float:left;}
答案 0 :(得分:0)
我添加浮动左侧导航栏切换并向右移动到导航栏导航栏 here a fiddle
.navbar-toggle {
float: left;
margin-left: 15px;
}
@media (max-width: 768px){
.navbar-nav {
float: right;
}
}