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導航欄摺疊沒有正確設置

回答

相關問題