Bootstrap导航栏折叠没有正确设置

我有一个可折叠的导航栏，在折叠时无法正确显示。我正在将右侧的导航栏标题（包含导航条品牌）移动到右侧。但是，添加此功能似乎会使切换按钮和导航栏品牌之间的导航栏处于切换状态。我希望切换的导航栏位于按钮和品牌下方的任何位置。Bootstrap导航栏折叠没有正确设置

这是格式正确的版本，但是，品牌不拉到右侧

这是正在发生的事情，当我拉品牌在

这里是我的代码正在使用。引导版本是3.3.6

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="glyphicon glyphicon-th-list"></span> 
     </button> 
    <div class="navbar-header pull-right"> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

来源

2016-08-15 knif3

尝试从导航栏，头部移除右拉式类将.navbar-brand {float：right;}添加到您的css中，例如https://jsfiddle.net/link2pk/chrfzen5/2/ – link2pk

只要导航栏展开，品牌就会移到左侧。我宁愿如果它始终保持在正确的位置 – knif3

已更新https://jsfiddle.net/link2pk/chrfzen5/5/ – link2pk

.pos-rel{ position:relative;} 
 
.navbar-brand{position:absolute; right:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container pos-rel"> 
 
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="glyphicon glyphicon-th-list"></span> 
 
     </button> 
 
    <div class="navbar-header"> 
 
    <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

试试这个

来源

2016-08-15 01:49:04 link2pk

非常感谢。完美的作品 – knif3

试试这个下面的代码：

<body> 
<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="glyphicon glyphicon-th-list"></span> 
      </button> 
      <div class="pull-right" id="mobile-nav"> 
       <a class="navbar-brand" href="#">Brand</a> 
      </div> 
    </div> 

    <div class="pull-right" id="com-nav"> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     setNavbarBrand(); 
    }); 

    $(window).resize(function() { 
     setNavbarBrand(); 
    }); 

    function setNavbarBrand() { 
     if (window.innerWidth <= 768) { 
      $('#mobile-nav').show(); 
      $('#com-nav').hide(); 
     } else { 
      $('#mobile-nav').hide(); 
      $('#com-nav').show(); 
     } 
    } 
</script> 
</body>

来源

2016-08-15 00:34:47

我之前有过这样的代码，但是当展开时，品牌会移回到左侧链接 – knif3

我已经编辑了我的代码，尝试一下。：D –

Bootstrap导航栏折叠没有正确设置

回答

相关问题