画面が大きくなるとブートストラップフォーム入力が壊れる

Question

画面サイズを「大」に拡張すると、このブーストフォームのフォーム入力が壊れている理由がわかりません。私は基本的には中規模のバージョンと同じになるように大きなバージョンを取得しようとしています。私はレイアウトを壊しているのか分からない。ここで

は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

問題はフィールドセットの幅です。幅が100％のような情報を追加してください<fieldset style="width: 100%">

また、フィールドセットタグを削除することもできます。あなたはそれを必要としません。

Answer 2

私はあなたのボタンから2つの列とseparete入力を作成する方が良いと思います。入力の幅を100％に設定し、ボタンのクラスをbtn-blockとし、クラスのプルー右を削除します。私はそれが助けてくれることを願う

<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>