如何处理树枝视图和引导 3 行/列? [英] How to handle twig view and bootstrap 3 rows/columns?

查看：27
本文介绍了如何处理树枝视图和引导 3 行/列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个文章实体，我在控制器中创建了一个 findAll().

我使用 col-md-6 类在一个 div 中呈现每篇文章.

但是对于每 2 篇文章，我必须将这些 div 包装在一行 div 中.

我怎样才能用 twig 做到这一点?

谢谢.

我像这样尝试了您的代码 (NHG):

{% for article in article %}{% if loop.index % 2 == 0 %}<div class="row"></div>{％ 万一 ％}<div class="col-md-6"><article class="well well-sm"><a href="#"><img src="{{ article.image }}" alt="{{ article.title }}" class="img-thumbnail"></a><h2 class="h3 text-center"><a href="#">{{ article.title }}</a></h2><div class="alert alert-success well-sm">{{ article.content|striptags|slice(0, 235) }}...

<a class="btn btn-default btn-sm pull-right" href="#">{{ article.comments|length }} 评论</a><div class="btn-group btn-group-sm">{% for tag in article.tags %}<a class="btn btn-default">{{ tag.name }}</a>{% 结束为 %}

</文章>

{% 结束为 %}

但它不起作用.

我想要这样的东西:

<div class="col-md-6"></div><div class="col-md-6"></div>
<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div>

<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div>

解决方案

更新:

正如@Maerlyn 所建议的:

{% for row in article|batch(2) %}<div class="row">{% 表示第 % 行中的文章}<div class="col-md-6">//你的内容

{% 结束为 %}

{% 结束为 %}

老方法:

使用 loop.index(文档:循环变量)，模(文档:数学运算符) 和 if (doc: if 语句)

{% for article in article %}{% if loop.index % 2 == 1 %}<div class="row">{％ 万一 ％}<div class="col-md-6">//你的内容
{% if (loop.index % 2 == 0 or loop.last) %}
{％ 万一 ％}{% 结束为 %}

I have an Article entity and I made a findAll() in the controller.

I rendered each article in a div with the col-md-6 class.

But foreach 2 articles I must wrap these divs in a row div.

How can I do this with twig ?

Thanks.

EDIT :

I tried your code (NHG) like this:

{% for article in articles %}
    {% if loop.index % 2 == 0 %}
        <div class="row"></div>
    {% endif %}
    <div class="col-md-6">
        <article class="well well-sm">
            <a href="#"><img src="{{ article.image }}" alt="{{ article.title }}" class="img-thumbnail"></a>
            <h2 class="h3 text-center"><a href="#">{{ article.title }}</a></h2>
            <div class="alert alert-success well-sm">
                {{ article.content|striptags|slice(0, 235) }}...
            </div>
            <a class="btn btn-default btn-sm pull-right" href="#">{{ article.comments|length }} Comments</a>
            <div class="btn-group btn-group-sm">
                {% for tag in article.tags %}
                    <a class="btn btn-default">{{ tag.name }}</a>
                {% endfor %}
            </div>
        </article>
    </div>
{% endfor %}

But it doesn't work.

I want to have something like this :

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

解决方案

UPDATED:

As @Maerlyn suggested:

{% for row in articles|batch(2) %}
    <div class="row">
        {% for article in row %}
            <div class="col-md-6">
                // your content
            </div>
        {% endfor %}
    </div>
{% endfor %}

OLD way:

Use loop.index (doc: The loop variable), modulo (doc: Math operators) and if (doc: if statement )

{% for article in articles %}
    {% if loop.index % 2 == 1 %}
        <div class="row">
    {% endif %}
    <div class="col-md-6">
        // your content
    </div>
    {% if (loop.index % 2 == 0 or loop.last) %}
        </div>
    {% endif %}
{% endfor %}

这篇关于如何处理树枝视图和引导 3 行/列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆