Bootstrap - 我的導航欄不可擴展

我從https://v4-alpha.getbootstrap.com/components/navbar/複製了導航代碼，但縮小瀏覽器按鈕的大小後，不能像在頁面上那樣擴展。Bootstrap - 我的導航欄不可擴展

我的導航：

<div class="container"> 
<h3>Navigation</h3> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
     </ul> 
     <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
</nav>

來源

2017-03-19 user

（來自導航的第一個示例） – user

您是否將它託管在某處？你的信息是不夠的。 –

您接受的bootstrap 3解決方案！和你問起bootstrap 4 – neophyte

下面是解..

您必須使用正確的，等使用導航欄引導。

我已經爲你創建了一個例子。就像

<html lang="en"> 
    <head> 
     <title>Bootstrap Case</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Page 1-1</a></li> 
       <li><a href="#">Page 1-2</a></li> 
       <li><a href="#">Page 1-3</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
     </ul> 
     </div> 
    </nav> 

    <div class="container"> 
     <h3>Divyesh Gausvami here..</h3> 
     <p>Sharing is caring .</p> 
    </div> 

    </body> 
</html>

你可以根據這個使用你的代碼。謝謝:)

來源

2017-03-19 12:35:09

我在下面再問。請幫幫我。 – user

此答案不對OP的問題提供答案OP詢問bootstrap 4不是bootstrap 4 – neophyte

首先你說的是bootstrap 4不是bootstrap 3.所以接受的答案的代碼是無效的。

接下來，您正在使用bootstrap 3.3.7 cdn，但在代碼中使用的類將不適用於bootstrap 3 cdns。

您需要使用下面提到的bootstrap 4 alpha的cdn來使您的代碼正常工作。

使用此CDNS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

工作片斷

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    <form class="form-inline my-2 my-lg-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> 
 
    </div> 
 
</nav>

要了解自舉3和Bootstrap 4之間的區別閱讀這些文檔carefully--

https://v4-alpha.getbootstrap.com/getting-started

希望這有助於！

來源

2017-03-20 00:02:18 neophyte

Bootstrap - 我的導航欄不可擴展

回答

相關問題