代码之家 › 专栏 › 技术社区 › Element Zero

移动设备上引导程序进度条上的中心当前分区

symfony4 bootstrap-4 symfony css php

0

Element Zero · 技术社区 · 7 年前

我的网站上有一个引导程序进度条,根据我们所在的页面(填写多页表单),它会“亮起”。仅仅看到一个例子可能会更容易,所以我做了如下的说明:

Example

问题出在手机上,进度条从屏幕上消失。我想我想把当前页面放在中间,只要当前页面(在条上)在屏幕中央,条就可以从屏幕左或右消失。

有什么办法吗?

如果有帮助,下面是实际代码:

{% if app.request.get('_route') == 'orders_add_fax' %}
    {%   set page = 0 %}
{% elseif app.request.get('_route') == 'orders_add_patients' %}
    {%   set page = 1 %}
{% elseif app.request.get('_route') == 'orders_add_payment' %}
    {%   set page = 2 %}
{% elseif app.request.get('_route') == 'orders_add_clients' %}
    {%   set page = 3 %}
{% elseif app.request.get('_route') == 'orders_add_employees' %}
    {%   set page = 4 %}
{% elseif app.request.get('_route') == 'orders_add_dates' %}
    {%   set page = 5 %}
{% elseif app.request.get('_route') == 'orders_add_notes' %}
    {%   set page = 6 %}
{% elseif app.request.get('_route') == 'orders_add_summary' %}
    {%   set page = 7 %}
{%  endif %}
<div class="progress" style="height:30px;width:570px;">
    <div class="progress-bar bg-{% if page >= 0 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%">
        <a href="{{ path('orders_add_fax') }}" class="text-white">Fax</a>
    </div>
    <div class="progress-bar bg-{% if page >= 1 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 1 %}
            <a href="{{ path('orders_add_patients') }}" class="text-white">Patients</a>
        {% else %}
            Patients
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 2 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 2 %}
            <a href="{{ path('orders_add_payment') }}" class="text-white">Payment</a>
        {% else %}
            Payment
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 3 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {%  if page >= 3 %}
            <a href="{{ path('orders_add_clients') }}" class="text-white">Client(s)</a>
        {%  else %}
            Client(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 4 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 4 %}
            <a href="{{ path('orders_add_phleb') }}" class="text-white">Phleb(s)</a>
        {% else %}
            Employee(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 5 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 5 %}
            <a href="{{ path('orders_add_dates') }}" class="text-white">Date(s)</a>
        {% else %}
            Date(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 6 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 6 %}
            <a href="{{ path('orders_add_notes') }}" class="text-white">Note(s)</a>
        {% else %}
            Note(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 7 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        Summary
    </div>
</div>

1 回复 | 直到 7 年前

1

0

Ari 7 年前

也许不是最好的尝试,但这是我尝试使用flex,也许你可以使用类似的东西?

http://jsfiddle.net/aq9Laaew/253301/

  .flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

  .flex-container > div {
  background-color: #f1f1f1;
  width: 100px!important;
  text-align: center;
  line-height: 75px;
 }

 .progress {
 height: auto;
 background-color: transparent;

}