Twitter bootstrap 在树枝上制造条件

我想知道是否有可能在Twig中创建一个条件，如果这是真的或假的话，那么为Bootstrap3更改一些html

假设我有一个包含5列的div容器。在最后一篇专栏文章中，有一个Facebook小部件。当我选择隐藏小部件时，容器只有4列而不是5列。 是否可以设置自动将html更改为4列的条件

<div class="col-md-2 col-sm-4 col-xs-12">... some content ...</div>
<div class="col-md-2 col-sm-4 col-xs-12">... some content ...</div>
<div class="col-md-2 col-sm-4 col-xs-12">... some content ...</div>
<div class="col-md-2 col-sm-4 col-xs-12">... some content ...</div>
{% if hide_fb_widget %}<div class="col-md-2 col-sm-4 col-xs-12">... Facebook widget ...</div>{% endif %}

。。。一些内容。。。
... 一些内容。。。
... 一些内容。。。
... 一些内容。。。
{%if hide\u fb\u widget%}。。。Facebook小部件…{%endif%}

如您所见，当fb小部件被隐藏时，“col-md-2”需要更改为：

<div class="col-md-3 col-sm-4 col-xs-12">... some content ...</div>

。。。一些内容。。。

---

有没有一个简单的方法可以做到这一点？我对小树枝很陌生

您需要将可以更改的类（

col-md-2

/

col-md-3

）放在细枝变量上

{% if hide_fb_widget %}
  {% set width_class = 'col-md-3' %}
{% else %}
  {% set width_class = 'col-md-2' %}
{% endif %}

然后，使用变量而不是原始字符串

<div class="{{ width_class }} col-sm-4 col-xs-12">... some content ...</div>
<div class="{{ width_class }} col-sm-4 col-xs-12">... some content ...</div>
<div class="{{ width_class }} col-sm-4 col-xs-12">... some content ...</div>
<div class="{{ width_class }} col-sm-4 col-xs-12">... some content ...</div>
{% if hide_fb_widget %}<div class="col-md-2 col-sm-4 col-xs-12">... Facebook widget ...</div>{% endif %}

。。。一些内容。。。
... 一些内容。。。
... 一些内容。。。
... 一些内容。。。
{%if hide\u fb\u widget%}。。。Facebook小部件…{%endif%}