Bootstrap導航菜單無法正常工作

Question

假設我使用的是窄屏設備。 在這種情況下，折疊菜單有時會展開，有時不會展開。 這是我的頁腳順序

<script async="async" src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script async="async" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script async="async" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

這是我的菜單代碼

<div class="navbar navbar-default">
<div class=container style=width:100%>
<div class=navbar-header>
<a href class=navbar-brand>SiteName</a>
<button class=navbar-toggle type=button data-toggle=collapse data-target=#navbar-main>
<span class=icon-bar></span>
<span class=icon-bar></span>
<span class=icon-bar></span>
</button>
</div>
<div class="navbar-collapse collapse" id=navbar-main>
<ul class="nav navbar-nav">
<li><a href=url>Menu</a></li>
<li><a href=url>Menu</a></li>
<li><a href=url>Menu</a></li>
<li><a href=url style=color:black>Menu</a></li>
</ul>
</div>
</div>
</div>

我在頁腳中也添加了此代碼段

<script>$(document).ready(function () {$('.dropdown-toggle').dropdown();});</script>

經過進一步檢查，我發現在單擊折疊菜單按鈕后，展開菜單內的html應該更改為

<div style="" aria-expanded="true" class="navbar-collapse collapse in" id="navbar-main">

從

<div style="height: 0.916667px;" aria-expanded="false" class="navbar-collapse collapse" id="navbar-main">

Answer 1

我遇到了同樣的問題，並使用CSS @media注釋解決了它：

@media screen and (max-width: 300px) {
    // your needed style here
}

另外，如果您有不同的尺寸/需求，請在此處檢查。