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

Question

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

我有这个菜单（黑色/反线）：

当我调整菜单大小时，它会将菜单 1 作为标题的列表格式：

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

我的代码：

<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>

我在这里有一个小提琴，http://jsfiddle.net/G5N67/

Answer 1

这是由以下规则引起的：

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

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

/* 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;
}

更新小提琴