Question

当我将屏幕尺寸扩展到“大”时，我无法弄清楚为什么此boostrap形式的表单输入会中断。我试图让大版本基本上与中版相同。我不确定是什么打破了布局。

这里是codepen： http://codepen.io/ctdvnprt/pen/JWaELE?editors=1000

＆＃13;

$(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');

});

＆＃13;

body{
  font-family:'Calibri';
  font-size:14px;
  letter-spacing:1px;
}


.wizard-step p {
    margin-top: 10px;
}
.wizard-row {
    display:table-row;
	
}
.wizard {
    display: table;
    width:100%;
    position: relative;
	  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; 
}

＆＃13;

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

＆＃13;

Answer 1

问题在于fieldset的宽度。添加宽度为100％的信息，如<fieldset style="width: 100%">

或者您可以删除fieldset标记。你不需要它。

Answer 2

我认为最好从按钮创建两列和separete输入。设置输入宽度为100％，按钮类为btn-block，并在类中删除pull-right。我希望它会有所帮助。

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

当屏幕很大时，Bootstrap表单输入中断

2 个答案: