如何调整bootstrap页眉中的导航栏?

时间:2017-04-03 20:56:15

标签: html css twitter-bootstrap

我使用bootstrap构建网站。在正常视图中(在笔记本电脑上),徽标应位于右侧,菜单位于左侧。问题出现在移动视图中,菜单项出现在左侧,而我想要它们在右侧(在徽标下)。 移动视图上的菜单项始终仅指普通视图的导航对齐。

我正在寻找enter image description here

这是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;}

1 个答案:

答案 0 :(得分:0)

我添加浮动左侧导航栏切换并向右移动到导航栏导航栏 here a fiddle

.navbar-toggle {
    float: left;
    margin-left: 15px;
}
@media (max-width: 768px){
.navbar-nav {
    float: right;
}
}