缩小时重新格式化 Twitter Bootstrap 菜单答案

【问题标题】：Reformat Twitter Bootstrap menu when making it smaller缩小时重新格式化 Twitter Bootstrap 菜单
【发布时间】：2013-11-16 00:08:28
【问题描述】：

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

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

当我调整菜单大小时，它会变成一个列表格式，菜单 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/

【问题讨论】：

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：