【问题标题】:Disable bootstrap's dropdown-toggle禁用引导程序的下拉切换
【发布时间】:2014-11-07 19:25:47
【问题描述】:

我正在使用 _ib 主题的 WordPress 上使用引导程序,并且我想在窗口小于 768 像素时添加我自己的响应式菜单。默认情况下,bootstrap 会将菜单转换为dropdown-toggle,单击它会显示您的原始菜单。我想做的是在小型设备或低分辨率下使用我自己的菜单。

如何删除这个dropdown-toggle?我查看了引导 JS 文件,但我不是 JS 专家,所以我不太清楚如何简单地废弃 dropdown-toggle

任何帮助表示赞赏!

编辑:

<div class="container">
        <div class="row">
            <div class="site-navigation-inner col-sm-12">
                <div class="navbar navbar-default">
                    <div class="navbar-header">
                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="sr-only">Go to...</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- The WordPress Menu goes here -->
                    <?php wp_nav_menu(
                        array(
                            'theme_location' => 'primary',
                            'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
                            'menu_class' => 'nav navbar-nav',
                            'fallback_cb' => '',
                            'menu_id' => 'main-menu',
                            'walker' => new wp_bootstrap_navwalker()
                        )
                    ); ?>
                </div><!-- .navbar -->
            </div>
        </div>
    </div><!-- .container -->

我尝试了删除此 .navbar-toggle 的简单方法,因为我不需要它,但实际上即使在整页窗口上也删除了整个菜单...

【问题讨论】:

  • 这不会做一个切换菜单,而是将菜单项放在彼此下方:jsfiddle.net/no5j25cj/1
  • 我几乎想删除引导程序切换解决方案的所有行为。目前,尽管看起来很糟糕,但我希望它没有响应,这样我就可以使用我拥有的简单 WordPress 插件来实现我自己的解决方案。

标签: javascript css wordpress twitter-bootstrap responsive-design


【解决方案1】:

当您查看索引 php 页面时。您将看到您的导航 div。

要关闭该行为,您可以删除切换类。

<div class = container>

等等

其中一个类将是一个切换类。只需将其删除。

它是什么版本? 2 或 3。

您可以将代码替换为您的代码。我对 joomla 很熟悉,它基本上是围绕 php 的 html。

如果您希望修改 css,则需要覆盖它。你如何轻松地做到这一点取决于你的模板是使用 CSS LESS 还是 custom.css 文件。您甚至可以使用引导布局类删除导航 Diva 并替换为您自己的代码。

提供引导程序的版本将有助于解决这个问题。

Bootstrap 使用您需要的媒体查询来查找您的目标查询。 Bootstrap 网站在这方面提供了非常丰富的信息

http://getbootstrap.com/getting-started/

这里有布局示例。确保您的导航 div 和类是相同的。它会起作用的。

请备份或注释掉旧代码以供重复使用。

当我到达我的电脑时,我会查看代码,如果那时还没有修复。

你在这里让我有点困惑。您有一个菜单(引导程序),并且您有一个也调用菜单的插件?

或者

您是否在同一页面上有两个菜单?还是您的插件依赖于当前菜单?

我很困惑你在这里想要什么。看起来你有一个菜单作为模板的一部分,然后你正在调用一个模块来以插件的形式创建一个菜单。如果是这种情况,它将不起作用。

插件菜单可能与现有菜单冲突。如果您有自己的现有菜单,为什么不直接删除整个模板菜单,然后让您的插件被调用?

如果我做得不好,我深表歉意。但是,如果涉及插件,则代码是未知的!

插件是模板的插件吗?如果没有,你可能有冲突

认为您可能需要联系插件的开发者

【讨论】:

  • 我正在使用最新版本,所以 3. 我正在尝试完全按照您所说的操作并删除切换功能。我已经为你添加了上面的导航代码,谢谢你的帮助!
  • 在上面的代码中,PHP 代码创建了菜单,我已经有一个插件可以使用该菜单创建响应式选择菜单。我想完全删除引导程序使用 JS/CSS 实现的切换。我以前使用过媒体查询,但我不知道这是否是问题所在。正如我之前所说,如果我删除切换代码,那么整个导航栏就会消失。感谢您的帮助。
  • 很抱歉让您感到困惑。该插件依赖于现有的菜单,因此对于此问题,您无需了解任何相关信息。该插件所做的只是处理小于 768 像素的菜单的外观,实际上它只是使其成为 &lt;select&gt; 菜单,一个老式的下拉菜单。该插件本身运行良好,并将菜单转换为&lt;select&gt; 菜单。因此,如果我将大小调整为 768 像素,我现在实际得到的是引导程序的切换按钮,这是我不想要的,当我按下切换按钮时,它会显示我漂亮的 &lt;select&gt; 菜单。所以....我想阻止它使用下拉切换。
  • 插件没有问题,你可以忘记:P这只是删除切换行为的问题
猜你喜欢
  • 2013-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-22
  • 2016-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多