Question

我使用bootstrap 3表单处理步骤链，水平显示步骤。在移动设备上，水平阶梯链变得如此之小并且看起来不太好。我想在较小的设备上垂直制作链条我怎么能这样做@ media（786px）

我正在使用此代码段... http://bootsnipp.com/snippets/featured/form-process-steps
这是HTML

 <div class="row bs-wizard" style="border-bottom:0;">

            <div class="col-xs-3 bs-wizard-step complete">
              <div class="text-center bs-wizard-stepnum">Step 1</div>
              <div class="progress"><div class="progress-bar"></div></div>
              <a href="#" class="bs-wizard-dot"></a>
              <div class="bs-wizard-info text-center">Lorem ipsum dolor sit amet.</div>
            </div>

            <div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
              <div class="text-center bs-wizard-stepnum">Step 2</div>
              <div class="progress"><div class="progress-bar"></div></div>
              <a href="#" class="bs-wizard-dot"></a>
              <div class="bs-wizard-info text-center">Nam mollis tristique. Aliquam erat voat</div>
            </div>

             <div class="col-xs-3 bs-wizard-step active"><!-- complete -->
              <div class="text-center bs-wizard-stepnum">Step 3</div>
              <div class="progress"><div class="progress-bar"></div></div>
              <a href="#" class="bs-wizard-dot"></a>
              <div class="bs-wizard-info text-center">Integer semper dolor ac auctor rutrum. Duisendum bibendum</div>
            </div>
  </div>

thanx

Answer 1

我曾尝试将以下CSS用于1000px媒体屏幕。

@media (max-width:1000px){
.bs-wizard {min-width:325px !important;overflow:auto}
.bs-wizard > .bs-wizard-step {transform: rotate(+90deg);display:block;margin:0 auto 0 auto;height:160px;width:160px !important}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum, .bs-wizard > .bs-wizard-step .bs-wizard-info {transform: rotate(-90deg);position:relative}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {top:144px}
.bs-wizard > .bs-wizard-step .bs-wizard-info {bottom:130px}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {top:46.5%}

}

它就像一个魅力！

Answer 2

我使用的是简化的Bootsrap4 / fontawesome步进器，如下所示，它可以转换为角度分量，没有花哨和专有依赖性

double ComputeMaximum(double Value1, double Value2)
{

    return  (Value1 > Value2) ? Value1 : Value2;

}
double ComputeMinimum(double Value1, double Value2)
{

    return  (Value1 > Value2) ? Value2 : Value1;

}

垂直移动自举水平梯级链

2 个答案: