更改扩展树枝模板的标题栏的背景颜色

Question

我有一个用于Bootstrap弹出窗口的树枝模板。代码是：

span class="popover-wrapper {% block wrapper_class %}{% endblock %}">
  <button
      type="button"
      class="btn-link popover-link {% block link_class %}{% endblock %}"
      tabindex="0"
      role="button"
      data-toggle="popover"
      data-placement="bottom"
      data-title="{% block title %}{% endblock %}"
      >{% block link_text %}{% endblock %}</button>
  <div class="popover-inner-content {% block content_class %}{% endblock %}">
    {% block content %}{% endblock %}
  </div>
</span>

将此模板扩展到另一个html.twig视图时，

{% embed 'fragments/popover.html.twig' %}
    {% block link_class %}more-sections{% endblock %}
    {% block link_text %}
         <span class="fa fa-info-circle"></span>

    {% endblock %}
    {% block title %}<div>Contact Info</div>{% endblock %}
    {% block content %} .......

将style="background-color: blue;"添加到标题div时，它会禁用弹出显示/消失功能。如何更改弹出式“标题”部分的背景颜色

Answer 1

您通过在标题标签内使用双引号来破坏HTML。

<button data-title="<div style="background-color: blue;">Contact Info</div>">...</button>

您可以通过使用单引号解决

{% block title %}<div style='background-color: blue;'>Contact Info</div>{% endblock %}