jquery - 我如何让这个导航在 iphone 和 ipad 上工作，尽管它是响应式的

Question

我不确定让这个导航在 ipad 和 iphone 上工作的标准 Bootstrap 方法是什么。如果我缩小页面，则会出现水平滚动，我认为这不是预期的效果。

<div id="navbar-example" class="navbar navbar-static span8" style="margin-top: 20px;">
<!-- navigation -->
<div class="navbar-inner">
    <div class="container" style="width: auto;">
        <a class="brand" href="#">Animal Types</a>
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mammals <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chimpanzee">Chimpanzee</a></li>
                    <li><a href="#" onclick="return false" id="lemur">Lemur</a></li>
                    <li><a href="#" onclick="return false" id="jaguar">Jaguar</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="cobra">Cobra</a></li>
                    <li><a href="#" onclick="return false" id="eidechse">Eidechse</a></li>
                    <li><a href="#" onclick="return false" id="iguana">Iguana</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li id="fat-menu" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rodents <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chipmunk">Chipmunk</a></li>
                    <li><a href="#" onclick="return false" id="beaver">Beaver</a></li>
                    <li><a href="#" onclick="return false" id="hamster">Hamster</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!-- content pages -->

现场示例在这里:

http://tonysilvestri.com/examples/twitterBootstrapDropdown/bootstrapDropdownExample.html#

底线:

我们如何使用 twitter bootstrap 为 iphones/ipads 开发子级菜单页面。

Answer 1

要实现折叠响应式导航栏，请将导航栏内容包装在包含的 div 中，.nav-collapse.collapse，并添加导航栏切换按钮，.btn-navbar.

试试这个

<div id="navbar-example" class="navbar navbar-static span8" style="margin-top: 20px;">
<!-- navigation -->
<div class="navbar-inner">
    <div class="container" style="width: auto;">
        <a class="brand" href="#">Animal Types</a>

 <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>        

 <div class="nav-collapse">
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mammals <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chimpanzee">Chimpanzee</a></li>
                    <li><a href="#" onclick="return false" id="lemur">Lemur</a></li>
                    <li><a href="#" onclick="return false" id="jaguar">Jaguar</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="cobra">Cobra</a></li>
                    <li><a href="#" onclick="return false" id="eidechse">Eidechse</a></li>
                    <li><a href="#" onclick="return false" id="iguana">Iguana</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li id="fat-menu" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rodents <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chipmunk">Chipmunk</a></li>
                    <li><a href="#" onclick="return false" id="beaver">Beaver</a></li>
                    <li><a href="#" onclick="return false" id="hamster">Hamster</a></li>
                </ul>
            </li>
        </ul>
  </div>        



    </div>
</div>
</div>