Question

我正在努力将自定义Drupal 8主题与Bootstrap 4框架放在一起。我创建了一个带有导航栏的标准HTML模型，一切都按预期工作，包括导航栏切换器。

但是，当我将代码转移到我的自定义主题时，导航栏切换器不起作用。换句话说，它不会在点击时扩展。我尝试通过以下操作调试此问题：

从Bootstrap CDN转移到CSS和JS Bootstrap文件的本地副本。
已验证首先加载了core / jquery，然后是popper.js，然后是bootstrap.min.js。
将原始HTML代码与Drupal 8主题呈现代码进行比较。
使按钮的数据目标成为一个类而不是一个id（我认为这是另一个人类似问题的解决方案）。

以上所有检查都没有问题。所以我没有看到导致切换器无法正常工作的原因。

下面，我附上我当前的代码。如果有人发现我明显缺少的东西，我会很感激帮助：

-menu.twig文件：

{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('navbar-nav')}}>
    {% else %}
      <ul{{ attributes.addClass('navbar-nav')}}>
    {% endif %}
    {% for item in items %}
      <li{{ item.attributes.addClass('nav-item') }}>
        {{ link(item.title, item.url, item.attributes.addClass('nav-link').removeClass('nav-item')) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

-block menu -twig file：

<div {{attributes.addClass('col-sm-12 col-12').removeAttribute('id', 'block-
wrscd8menu')}}>
{% set heading_id = attributes.id ~ '-menu'|clean_id %}
<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ 
attributes.addClass('navbar navbar-expand-md navbar-light').removeClass('col-
sm-12 col-12')|without('role', 'aria-labelledby')}}>
    <button {{attributes.addClass("navbar-toggler ml-auto mx-
0").removeClass("navbar navbar-expand-md navbar-light").setAttribute('data-
target', '#block-wrscd8menu').setAttribute("type", 
"button").setAttribute("data-toggle", "collapse").setAttribute("aria-
controls", "block-wrscd8menu").setAttribute("aria-expanded", "false" 
).setAttribute("aria-label", "Toggle navigation")}}>
            <span {{attributes.addClass("navbar-toggler-
icon").removeClass("navbar-toggler ml-auto mx-0").removeAttribute("type", 
"button").removeAttribute("data-toggle", "collapse").removeAttribute("data-
target", "#block-wrscd8menu").removeAttribute("aria-controls", "block-
wrscd8menu").removeAttribute("aria-expanded", "false" ).removeAttribute("aria-
label", "Toggle navigation")}}></span>
    </button>

  {# Menu. #}
  <div {{attributes.addClass('collapse navbar-collapse').setAttribute('id', 
  'block-wrscd8menu').removeClass('navbar-toggler-icon')}} >
  {% block content %}
        {{ content }}
  {% endblock %}
</div>
</nav>
</div>

libraries.yml文件：

global-css:
  css:
    theme:
      css/styles.css: {} 

global-js:
  js:
    js/main.js: {scope: footer} 

bootstrap:
    version: 4.0.0-beta2
    css:
      theme: 
        css/bootstrap.min.css: {preprocess: false, minified: true}

    js:
      js/popper.min.js: {preprocess: false, minified: true, scope: footer}
      js/bootstrap.min.js: {preprocess: false, minified: true, scope: footer}
    dependencies:
      - core/jquery

P.S。 Drupal themers的另一个问题可能是这样：你如何阻止孩子继承为父母宣布的类？我需要使用removeClass来处理过渡期间的问题。感谢。

Bootstrap 4切换器无法在自定义Drupal 8主题

0 个答案: