我不确定让这个导航在 ipad 和 iphone 上工作的标准引导方式是什么。如果我缩小页面,则会出现水平滚动,我认为这不是预期的效果。
<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 为 iphone/ipad 开发子级菜单页面。