Question

我使用symfony2，使用twig和bootstrap3。我想根据屏幕大小更改元素在模板中的组织方式。

以下是我想做的事情：

{# ----------------------------------- LARGE SCREENS -------------------------- #}
            <div class="visible-lg-block">
                {# Emetteur et infos ticket #}
                <div class="row">
                    <div class="col-md-6" style="font-size: 12px">
                        {% include "AtgpTrackerBundle:Ticket:_viewEmitter.html.twig" %}
                    </div>

                    <div class="col-md-6" style="font-size: 12px;">
                        {% include "AtgpTrackerBundle:Ticket:_viewTicketInfos.html.twig" %}
                    </div>    
                </div>
                    <hr style="padding-top: 0px">
                <div class="row">
                    <div class="col-md-6">

                        {# Tickets liés #}
                        {% if nblinks > 0 %}
                            {% include "AtgpTrackerBundle:Ticket:_viewLinks.html.twig" %}
                        {% endif %}

                        {# Fichiers associés #}
                        {% if files %}
                            {% include "AtgpTrackerBundle:Ticket:_viewFiles.html.twig" %}
                        {% endif %}

                        {# Description #}
                        {% include "AtgpTrackerBundle:Ticket:_viewDescription.html.twig" %}   

                        {# Progression #}
                        {% include "AtgpTrackerBundle:Ticket:_viewProgress.html.twig" %} 

                        {# Infos société #}            
                        {% if company %}
                            {% include "AtgpTrackerBundle:Ticket:_viewCompanyInfos.html.twig" %}
                        {% endif %}
                    </div>      

                    <div class="col-md-6">
                        {# Messagerie #}
                        {% include "AtgpTrackerBundle:Ticket:_viewMessenger.html.twig" %}
                    </div>
                </div>
            </div>      
        {# ----------------------------- SMALL SCREENS ---------------------- #}
            <div class="hidden-lg">
                <div class="col-md-12">
                    {# Emetteur et infos ticket #}
                    {% include "AtgpTrackerBundle:Ticket:_viewEmitter.html.twig" %}
                    {% include "AtgpTrackerBundle:Ticket:_viewTicketInfos.html.twig" %}

                    {# Messagerie #}
                    {% include "AtgpTrackerBundle:Ticket:_viewMessenger.html.twig" %}

                    {# Tickets liés #}
                    {% if nblinks > 0 %}
                        {% include "AtgpTrackerBundle:Ticket:_viewLinks.html.twig" %}
                    {% endif %}

                    {# Fichiers associés #}
                    {% if files %}
                        {% include "AtgpTrackerBundle:Ticket:_viewFiles.html.twig" %}
                    {% endif %}

                    {# Description #}
                    {% include "AtgpTrackerBundle:Ticket:_viewDescription.html.twig" %}   

                    {# Progression #}
                    {% include "AtgpTrackerBundle:Ticket:_viewProgress.html.twig" %} 

                    {# Infos société #}            
                    {% if company %}
                        {% include "AtgpTrackerBundle:Ticket:_viewCompanyInfos.html.twig" %}
                    {% endif %}
                </div>
            </div>

正如您所看到的，我使用了一堆包含我想要显示的块的包含。我尝试使用bootstrap "visible" and "hidden" classes，以便根据屏幕大小更改页面中块的组织方式。

但是，我的包含块包含表格和手风琴。因此，当我使用小屏幕时，表格不会显示，手风琴也无法正常工作...我猜是因为它们已经装入了大屏幕＆＃34;部分。

有没有办法解决这个问题？我可以用什么方法来做我想做的事情？

任何帮助将不胜感激，谢谢。

Answer 1

两种选择：

根据Vladmir的评论，JavaScript页面检测。

为此目的存在MobileDetectBundle。您需要mobile_detector服务，它允许您在控制器中执行此类操作：

$device = $this->get('mobile_detect.mobile_detector');

// basic device detection
$device->isMobile();
$device->isTablet();

// fine-grained device detection
$device->isIphone();
$device->isIpad();
$device->isSamsung();

// device operating system
$device->isIOS();
$device->isAndroidOS();

从那里你可以吐出桌面/移动模板或将设备类型传递给具有条件的单个模板：

{% if not is_mobile() %}
{# ----------------------------------- LARGE SCREENS -------------------------- #}
        <div class="visible-lg-block">
            {# Emetteur et infos ticket #}
            <div class="row">
                <div class="col-md-6" style="font-size: 12px">
                    ...
{% else %}
{# ----------------------------- SMALL SCREENS ---------------------- #}
        <div class="hidden-lg">
            <div class="col-md-12">
                {# Emetteur et infos ticket #}
                    ...
{% endif %}

我个人倾向于构建一个良好的响应式设计，主要是使用CSS。

twig如何根据屏幕大小修改模板

1 个答案: