jquery - 缩小时重新格式化 Twitter Bootstrap 菜单

Question

我不确定当前的标题是否最好，但我想不出更好的。

我有这个菜单(黑色/反色线):

当我调整菜单大小时，它会变成列表格式，菜单 1 作为标题:

我不想要这个 ListView ，所以我怎样才能让它像底线一样工作，只是将文本重新格式化为新行？

我的代码:

<div class="mymenu navbar navbar-fixed-top navbar-inverse" role="navigation">
  <a class="navbar-brand" href="./">My Project</a>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#menu1" data-toggle="tab">Menu 1</a></li>
    <li><a href="#menu2" data-toggle="tab">Menu 2</a></li>
    <li><a href="#menu3" data-toggle="tab">Menu 3</a></li>
    <li><a href="#menu4" data-toggle="tab">Menu 4</a></li>
    <li><a href="#menu5" data-toggle="tab">Menu 5</a></li>
    <li><a href="#menu6" data-toggle="tab">Menu 6</a></li>
    <li><a href="#menu7" data-toggle="tab">Menu 7</a></li>
    <li><a href="#menu8" data-toggle="tab">Menu 8</a></li>
    <li><a href="#menu9" data-toggle="tab">Menu 9</a></li>
  </ul>
</div>

我这里有一个 fiddle ，http://jsfiddle.net/G5N67/

Answer 1

这是由这条规则引起的:

@media (min-width: 768px) {
    .navbar-nav>li {
        float: left;
    }
}

您可以简单地为 width < 768px 覆盖它，通过将这些规则添加到您的 CSS 中:

/* The one your looking for */
.navbar-nav>li {
    float: left; 
}
/* Other rules for visual issues */
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

Updated Fiddle