php - 有两步的智能向导没有正确的渲染

Question

对于表单，我使用的是智能向导实例：https ://github.com/mstratman/jQuery-Smart-Wizard 。

我现在只有两个步骤，并且呈现不正确。这条线比第二个气泡长。我怎样才能解决这个问题？

<form id="reportForm" method="post">
   <div id="reportWizard" class="form_wizard wizard_horizontal">
      <ul class="wizard_steps">
         <li>
            <a href="#step-1">
            <span class="step_no">1</span>
            <span class="step_descr">
            Schritt 1<br/>
            <small>Spielinformationen angeben</small>
            </span>
            </a>
         </li>
         <li>
            <a href="#step-2">
            <span class="step_no">2</span>
            <span class="step_descr">
            Schritt 2<br/>
            <small>Bewertung abgeben</small>
            </span>
            </a>
         </li>
      </ul>
      <div id="step-1">
         <div class="form-horizontal form-label-left">                                   
         </div>
      </div>
      <div id="step-2">
         <div class="form-horizontal form-label-left">
         </div>
      </div>
   </div>
</form>

<script>
$(document).ready(function() {
    $('#reportWizard').smartWizard({
        // Properties
        labelNext: 'Weiter', // label for Next button
        labelPrevious: 'Zurück', // label for Previous button
        labelFinish: 'Bericht anlegen', // label for Finish button
        onFinish: function() {
            document.getElementById("reportForm").submit();
        } // triggers when Finish button is clicked
    });
    $('.buttonNext').addClass('btn btn-success');
    $('.buttonPrevious').addClass('btn btn-primary');
    $('.buttonFinish').addClass('btn btn-default');
});
</script>

Answer 1

刚刚检查了你的代码

并尝试了这个

<form id="reportForm" method="post">
                            <div id="reportWizard" class="form_wizard wizard_horizontal">
                                <ul class="wizard_steps">
                                    <li>
                                        <a href="#step-1">
                                            <span class="step_no">1</span>
                                            <span class="step_descr">
                                                Schritt 1<br />
                                                <small> angeben</small>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#step-2">
                                            <span class="step_no">2</span>
                                            <span class="step_descr">
                                                Schritt 2<br />
                                                <small> abgeben</small>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                                <div id="step-1">
                                    <div class="form-horizontal form-label-left">
                                    </div>
                                </div>
                                <div id="step-2">
                                    <div class="form-horizontal form-label-left">
                                    </div>
                                </div>
                            </div>
                        </form>

并检查智能向导不支持长描述词。因为如果您删除“Bewertung”和“Spielinformationen”，它就会起作用。