我正在尝试使用 Twitter 引导程序使我的网站响应,但我的导航遇到了一些问题。我正在使用引导程序的导航菜单,但它不会更改为我的平板电脑/手机上的下拉按钮。它仅在我的 iPad 为纵向时显示,但在横向时不显示。
我正在使用这些媒体查询:
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { }
/* Landscape phones and down */
@media (max-width: 480px) { }
HTML:
<nav class="navbar">
<div class="row">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="home active"><a href="">HOME</a></li>
<div class="nav-separator hidden-desktop"></div>
<li><a href="projecten">PROJECTEN</a></li>
<div class="nav-separator hidden-desktop"></div>
<li><a href="sketch">SKETCH</a></li>
<div class="nav-separator hidden-desktop"></div>
<li><a href="contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>