0
我有一個帶下拉菜單的導航欄。現在我想讓智能手機用戶也可以使用它。我已經包含了引導類，所以我想我可以使用引導。Responsive Bootstrap navbar - 智能手機的菜單按鈕不顯示
我用一個generato r創建一個基本的導航欄，只是爲了測試它是否工作。
這裏的結果：https://jsfiddle.net/bwbuqco2/
當調整在小提琴的窗口中，較小的屏幕菜單按鈕就會出現。但在我的網站上並沒有。導航欄完全消失在我的網站上，我不知道爲什麼。
我停用了我舊的導航欄的任何樣式，但那並沒有解決問題。
如果您需要更多信息，請告訴我。我不知道問題出在哪裏。
我也會開放解決方案旁邊的引導。
這裏是我的導航欄結構：
<nav class="navbar navbar-default">
<div class="container" style="margin-left:100px;">
<ul class="nav navbar-nav">
<li>
<a href="">
Startseite
</a>
</li>
<li>
<a href="ueber-mich/">
Über mich
</a>
</li>
<li>
<a href="#anker">
Referenzen
</a>
<ul>
<li><a href="link1/">link1/</a></li>
<li><a href="link2/">link2</a></li>
<li><a href="link3/">link3</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link5/">link5</a></li>
</ul>
</li>
<li>
<a href="link6/">
link6
</a>
</li>
</ul>
</div>
</div>
</nav>-->
CSS
.navbar{
margin-left: -3px;
margin-bottom: 0;
background: @color-purple;
border: none;
.navbar-nav{
> li {
> ul {
text-align: center;
padding: 0;
display: none;
z-index: 1;
background: rgba(41, 38, 87, 0.7);
position: absolute;
visibility: hidden;
list-style-type: none;
margin-left: -50px;
>li{
margin: 0 auto;
display: block;
> a {
border: 1px solid @color-purple;
display: block;
padding: 1em;
color: @color-white;
font-size: 14px;
font-weight: lighter;
text-transform: uppercase;
list-style-type: none;
}
>a:hover{
background: @color-purple;
text-decoration: none;
color: @color-white;
}
}
}
> a {
color: @color-white;
text-align: center;
font-size: 16px;
font-weight: lighter;
text-transform: uppercase;
padding: 25px 40px 25px 0px;
list-style-type: none;
}
>a:hover{
color: @color-white;
text-decoration: underline;
}
}
>li:hover{
> ul {
display: block;
position: absolute;
visibility: visible;
}
}
}
}
感謝您的閱讀！