Bootstrap 3 navbar collape width

正常情況下，Bootstrap導航欄摺疊得到的菜單是屏幕的整個寬度。有沒有什麼辦法可以使它只與內容和屏幕右側一樣寬？Bootstrap 3 navbar collape width

2017-02-22 James R. Skinner

它可以通過以下方式 -

工作示例進行

@media(max-width:767px){ 
 
       .navbar-inverse { 
 
       width:50%; 
 
       margin-left: 50%; 
 
       } 
 
      }

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid" id="nav-container"> 
 
    <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="#">header</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
    
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <a href="" class="btn navbar-btn" id="signup">Sign Up</a> 
 
     <!--<a href="" ><button class="btn navbar-btn" id="stud">Studier demo</button></a>--> 
 
     <a href="" ><button class="btn navbar-btn" id="help">log-in</button></a> 
 
     <!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>--> 
 
     <a href="" ><button class="btn navbar-btn" id="friend">another</button></a> 
 
    </ul> 
 
    
 
    </div> 
 
    </div> 
 
    </nav> 
 
    </body> 
 
    </html>

來源

2017-02-22 17:03:19 neophyte

嗯，這是一個進步，但我真的希望能有菜單隻能作爲作爲其內容而不是屏幕的50％。無論如何這樣做？ –

我嘗試使用網格系統，但沒有成功。所以對於我而言，您只需根據內容寬度自定義寬度和邊距。 – neophyte

Bootstrap 3 navbar collape width

回答

相關問題