爲什麼我的導航欄菜單被切斷？

我已經給了一個網站進行修改，這是使用Bootstrap v3.3.7構建的。它包括一個導航欄（下面的HTML），看起來不錯。不過，我需要在導航欄中添加一個下拉菜單項，我按照the Bootstrap page上的說明操作。 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>

來源

2017-02-09 Avrohom Yisroel

包含更多的CSS或活生生的例子吧。 –

包含菜單下拉列表的元素*（最可能是標題）*被正確設置爲「overflow：hidden」。但是當你沒有添加CSS或者一個實例時，它很難提供幫助。 – TheYaXxE

我無法評論，但這樣我會在這裏把我的意見與建議

新手顯示，代碼工作正常。檢查你的CSS樣式，如果你有溢出：隱藏或某事上您頭
我不知道，如果黑色背景與菜單中選擇您編輯的一部分，這裏如果不切斷，那麼你的頭有溢出
告訴我們你的CSS樣式太

來源

2017-02-09 18:11:29 nyjn24

謝謝，這是問題的'溢出：隱藏'。我沒有包含CSS，因爲我認爲這是所有標準的Bootstrap東西。我沒有意識到設計者增加了額外的CSS。 –

<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問題。你可能在你的頁面中包含了兩次。

來源

2017-02-09 18:02:33 neophyte

爲什麼我的導航欄菜單被切斷？

回答

相關問題