Bootstrap Form Eingänge brechen, wenn der Bildschirm groß ist

Question

Ich kann nicht herausfinden, warum Formulareingaben in dieser Boostrap-Form brechen, wenn ich die Bildschirmgröße auf "groß" erweitern. Ich versuche, die große Version im Grunde mit der mittleren Version identisch zu machen. Ich bin mir nicht sicher, was das Layout bricht.

Hier ist der codepen: http://codepen.io/ctdvnprt/pen/JWaELE?editors=1000

$(document).ready(function() { 
 
    var steps_link = $('div.steps div a'), 
 
    steps_contents = $('.step-content'), 
 
    nexts = $('.nextBtn'); 
 

 
    steps_contents.hide(); 
 

 
    steps_link.click(function(e) { 
 
    e.preventDefault(); 
 
    var $target = $($(this).attr('href')), 
 
     $item = $(this); 
 

 
    if (!$item.hasClass('disabled')) { 
 
     steps_link.removeClass('btn-primary').addClass('btn-default'); 
 
     $item.addClass('btn-primary'); 
 
     steps_contents.hide(); 
 
     $target.show(); 
 
     $target.find('input:eq(0)').focus(); 
 
    } 
 
    }); 
 

 
    nexts.click(function() { 
 
    var curStep = $(this).closest(".step-content"), 
 
     curStepBtn = curStep.attr("id"), 
 
     nextwizard = $('div.steps div a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
 
     curInputs = curStep.find("input[type='text'],input[type='url']"), 
 
     isValid = true; 
 

 
    $(".form-group").removeClass("has-error"); 
 

 
    for (var i = 0; i < curInputs.length; i++) { 
 
     if (!curInputs[i].validity.valid) { 
 
     isValid = false; 
 
     $(curInputs[i]).closest(".form-group").addClass("has-error"); 
 
     } 
 
    } 
 

 
    if (isValid) { 
 
     nextwizard.removeClass('disabled').trigger('click'); 
 
    } 
 
    }); 
 

 
    $('div.steps div a.btn-primary').trigger('click'); 
 

 
});

body{ 
 
    font-family:'Calibri'; 
 
    font-size:14px; 
 
    letter-spacing:1px; 
 
} 
 

 

 
.wizard-step p { 
 
    margin-top: 10px; 
 
} 
 
.wizard-row { 
 
    display:table-row; 
 
\t 
 
} 
 
.wizard { 
 
    display: table; 
 
    width:100%; 
 
    position: relative; 
 
\t margin-top:-50px; 
 
} 
 

 
.wizard-step .disabled{ 
 
    opacity:1; 
 
    color:#ccc; 
 
    background:#efefef; 
 
} 
 
.wizard-row:before { 
 
    top:30px; 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #ccc; 
 
    z-order: 0; 
 
} 
 
.wizard-step { 
 
    display: table-cell; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.btn-circle { 
 
    width:60px; 
 
    height:60px; 
 
    text-align: center; 
 
    font-size:20px; 
 
    font-weight:lighter; 
 
    line-height:44px; 
 
    border-radius:50%; 
 
    background-color: #00467f; 
 
} 
 

 
.nextBtn { 
 
    background-color: #007dc3; 
 
    border-color: #007dc3; 
 
} 
 

 
.nextBtn:hover { 
 
    background-color: #006ba5; 
 
    border-color: #006ba5; 
 
} 
 

 
.btn-default { 
 
    color: #fff; 
 
} 
 

 
.btn-success { 
 
    background-color: #78a025; 
 
    border-color: #78a025; 
 
} 
 

 
.btn-success:hover, .btn-success:active { 
 
    background-color: #6a8921; 
 
    border-color: #6a8921; 
 
}

<div class="container"> 
 

 
    <div class="well" style="margin-top:50px;"> 
 
    <div class="wizard col-lg-12"> 
 
     <div class="wizard-row steps"> 
 
     <div class="wizard-step"> 
 
      <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> 
 
      <p>Personal Information</p> 
 
     </div> 
 
     <div class="wizard-step"> 
 
      <a href="#step-2" type="button" class="btn btn-default btn-circle disabled">2</a> 
 
      <p>Your Interests</p> 
 
     </div> 
 
     <div class="wizard-step"> 
 
      <a href="#step-3" type="button" class="btn btn-default btn-circle disabled">3</a> 
 
      <p>Additional Information</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <fieldset> 
 
     <legend></legend> 
 
     <form role="form" action="" method="post"> 
 
     <div class="row step-content" id="step-1"> 
 
      <div class="col-md-12"> 
 
      <div class="form-group"> 
 
       <label class="control-label">First Name</label> 
 
       <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn pull-right" type="button">Next</button> 
 
      </div> 
 
     </div> 
 
     <div class="row step-content" id="step-2"> 
 
      <div class="col-md-12"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Company Name</label> 
 
       <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn pull-right" type="button">Next</button> 
 
      </div> 
 
     </div> 
 
     <div class="row step-content" id="step-3"> 
 
      <div class="col-md-12"> 
 
      <button class="btn btn-success pull-right" type="submit">Submit</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </fieldset> 
 
    </div> 
 
</div>

Answer 1

Das Problem ist in der Breite des Fieldset. Fügen Sie die Information hinzu, dass die Breite 100% ist. <fieldset style="width: 100%">

Oder Sie können das Feldset-Tag löschen. Du brauchst es nicht.

Answer 2

Ich denke, es ist besser, zwei Spalten zu erstellen und separate Eingabe von Ihrem Knopf. Setzen Sie die Eingabe-Breite 100% und die Button-Klasse btn-block und entfernen Sie Pull-Rechts in der Klasse. Ich hoffe, es wird helfen.

<div class="row step-content" id="step-1"> 
    <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12"> 
    <div class="form-group"> 
     <label class="control-label">First Name</label> 
     <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" width="100%" /> 
    </div> 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"> 
    <button class="btn btn-primary nextBtn btn-block" type="button">Next</button> 
    </div> 
</div>