php - 在移动设备上将当前 div 置于 Bootstrap 进度条的中心

Question

我的网站上有一个 Bootstrap 进度条，它会根据我们所在的页面(填写多页表单)“亮起”。看一个例子可能更容易，所以我做了这个:

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>

Answer 1

可能不是最好的尝试，但这是我使用 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;