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

Question

我对如何保持导航栏无响应有一点问题。我的菜单上只有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'));

Answer 1

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

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

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

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