删除响应式 Bootstrap 3 导航栏并保持元素内联答案

【问题标题】：Delete responsive Bootstrap 3 navbar and keep elements inline删除响应式 Bootstrap 3 导航栏并保持元素内联
【发布时间】：2013-10-03 12:24:58
【问题描述】：

我对如何让我的导航栏保持无响应有点问题。我的菜单上只有大约 5 个项目。

如果我不为小屏幕分辨率设置折叠，导航栏项目将被堆叠，这不是很方便。

我想让这些元素内联（也许调整它们的大小），因为它对于小屏幕分辨率仍然是清晰的。

这是一个屏幕截图和导航栏的代码（我使用的是 wordpress）。我正在使用 LESS + Grunt 进行编译，因此变量可能位于 Twitter Bootstrap LESS 文件中。

两个屏幕截图（第一个是大屏幕渲染 - 我的偏好 - 第二个，显示当前结果。

有没有办法保持这个导航栏的内联样式（并且不破坏其余部分的响应性）？

<header class="banner navbar navbar-default navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
        <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
      endif;?>
    </div>
  </div>
 </header>

非常感谢您！

编辑：我猜这个问题似乎来自这个 php 行（它堆叠元素）：

wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));

【问题讨论】：

标签： wordpress twitter-bootstrap navbar css

【解决方案1】：

当然，堆叠元素的不是 php 代码，但您已经找到了正确的起点。由于代码将指定的类分配给导航元素，因此删除“nav navbar-nav”值或将其更改为其他类名，例如“new-navclass”

wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'new-navclass'));

然后编辑你的 style.css 复制你喜欢的内联样式菜单。

另一种方法是编写 js 代码来检测屏幕调整大小，并从菜单元素中删除 'nav-stacked' 类。

【讨论】：