為什么我的導航欄菜單被切斷？
[英]Why is my navbar menu cut off?
問題描述
我已經獲得了一個網站進行修改，該網站是使用Bootstrap v3.3.7構建的。 它包括一個導航欄（下面的HTML），看起來不錯。 但是，我需要向導航欄添加一個下拉項，該項是按照Bootstrap頁面上的說明進行的 。 HTML基本上與我在其他地方使用的相同，沒有問題。
但是，在這種情況下，當我單擊下拉菜單時，菜單將被關閉。
您只能在菜單中看到第一項的頂部，僅此而已。
有人能解釋為什么會這樣嗎？ 這是導航欄的HTML ...
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<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>
</div>
<div class="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="...">Link 1</a></li>
<li><a href="...">Link 2</a></li>
<li><a href="...">Link 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">abc</a></li>
<li><a href="#">def</a></li>
<li><a href="#">ghi</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
2 個解決方案
解決方案1
1 2017-02-09 18:02:33
<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> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="site-title"> <h3>My web site</h3> </div> </div> <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> </div> <div class="col-md-8 col-sm-8 navbar-style"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="...">Link 1</a></li> <li><a href="...">Link 2</a></li> <li><a href="...">Link 3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">abc</a></li> <li><a href="#">def</a></li> <li><a href="#">ghi</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </body> </html>
對我來說，它工作正常。 查看上面的代碼段。 我認為這是CDN問題。 您可能已經在頁面中兩次添加了它。
解決方案2
1 已采納 2017-02-09 18:11:29
我目前無法發表評論，因此我將在此處提出建議
Neophyte顯示代碼運行正常。.如果溢出，請檢查CSS樣式：隱藏或標題中有東西
我不確定黑色背景是否屬於您的編輯內容，並且菜單在此處被截斷 ，否則標題就溢出了
告訴我們你的CSS樣式
儀表板導航欄菜單在右側時被切斷
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.