爲什麼我的Bootstrap v4 navbar無法正常顯示？

應該有一個很好的導航欄，有幾個鏈接和一個按鈕，但只有一個沒有任何文字的窄條。任何想法可能會導致這種情況？與代碼和小提琴導致https://jsfiddle.net/chd34xoa/爲什麼我的Bootstrap v4 navbar無法正常顯示？

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <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://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> 
    <title>Bootstrap</title> 
</head> 

<body> 
    <nav class="navbar navbar-dark" style="background-color:red"> 
     <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navTog"></button> 
     <div class="collapse navbar-toggleable-sm" id="navTog"><span class="navbar-brand">Logo</span> 
      <ul class="nav navbar-nav float-md-right"> 
       <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li> 
       <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li> 
       <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li> 
      </ul> 
     </div> 
    </nav> 
</body> 

</html>

來源

2017-06-24 elusznik

沒有容器類。 – serkan

@ serkandemirel0420我從udemy當中複製了示例代碼，我試圖遵循它，它在那裏工作得很好 – elusznik

嘗試將「容器」類添加到body標籤。 – serkan

編輯：正確的解釋

您沒有添加容器類

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>JS Bin</title> 
    </head> 
    <body> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

     <nav class="navbar navbar-dark" style=""> 
    <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 

     </div> 
      </div> 
     </nav> 


    </body> 
    </html>

來源

2017-06-24 21:04:07 Etherealm

你想使這個？

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <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://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> 
    <title>Bootstrap</title> 
</head> 

<body> 
<div class="container-fluid" style="margin:0;padding: 0;"> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color:#ff0100"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup"> 
      <div class="navbar-nav"> 
       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
       <a class="nav-item nav-link" href="#">Features</a> 
       <a class="nav-item nav-link" href="#">Pricing</a> 
       <a class="nav-item nav-link disabled" href="#">Disabled</a> 
      </div> 
     </div> 
    </nav> 
</div> 

</body> 

</html>

來源

2017-06-24 21:04:39

This，but full width – elusznik

我是編輯的代碼。如果你使用full width你使用container-fluid和margin：0; padding0 –

的最終狀態是否正確？ –

爲什麼我的Bootstrap v4 navbar無法正常顯示？

回答

相關問題