将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;
}

Updated Fiddle