前三个字段与其他字段不一致

Question

我的问题是，前三个字段比其他字段多一些。我不知道如何将这些字段与其他字段对齐。

我在笔上有一个example。

有问题的字段之一的代码：

curl

Answer 1

在clearfix之前，您似乎只是想为Kontact行缺少一个结束的窗体组DIV标记：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form class="form-horizontal do-not-submit" role="form" id="formJERECEProperties">
  <input type="hidden" id="iRECE_KEY" name="iRECE_KEY" value="180001334">
  <input type="hidden" id="hidden_cRECE_SRT" name="cRECE_SRT" value="6">
  <input type="hidden" name="iENTE_KEY" value="110000007">
  <input type="hidden" name="iBUUN_KEY">

  <br>
  <h3>testing</h3>

  <div class="row">
    <div class="col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Testing</h3>
        </div>
        <div class="panel-body">
          <div class="form-group">

            <label for="inputRECE_DBO" class="col-sm-2 control-label">Datum izposoje:</label>
            <div class="col-sm-2">
              <input type="text" class="form-control datepickerFiduro" name="b53b663f-86cb-422c-9b2a-a407990788e5" id="inputRECE_DBO" data-editable="1" data-default="true" value="08.03.2018" name1="dRECE_DBO">
            </div>

            <label for="inputRECE_DRE" class="col-sm-2 control-label">Datum vračila:</label>
            <div class="col-sm-2">
              <input type="text" class="form-control datepickerFiduro" name="a41fa57c-4654-4f13-a5eb-c4abb56a5950" id="inputRECE_DRE" data-editable="1" data-default="true" value="09.03.2018" name1="dRECE_DRE">
            </div>


          </div>


          <div class="form-group">
            <label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
            <div class="col-sm-3">
              <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" id="inputACCO_NME" name="98a4e8a7-55cb-4ab7-b075-7ab426566f5b" class="form-control ui-autocomplete-input" placeholder="Vpišite nekaj črk partnerja ali IDDDV"
                value="" autocomplete="off" name1="cACCO_NME">
            </div>
            <input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="170000209" tabindex="-1">
          </div>
          <div class="form-group">
            <label for="selectCONT_KEY" class="col-sm-2 control-label">Kontakt:</label>
            <div class="col-sm-3">
              <select id="selectCONT_KEY" class="form-control">

              </select><input type="hidden" id="hidden_iCONT_KEY" name="iCONT_KEY">
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="form-group col-sm-12"></div>
          <div class="form-group">
            <label for="inputRECE_NME" class="col-sm-2 control-label">Ime reverza:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" name="ead8d066-2618-4ed2-b03e-84c6cb46da4d" id="inputRECE_NME" value="" name1="cRECE_NME">
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">Skladišče:</label>
            <div class="col-sm-3">
              <select id="inputDIVI_KEY" name="iDIVI_KEY" class="form-control">
                <option value="140001070">Centralno skladišče</option>
              </select>
            </div>
            <div class="col-sm-7"> </div>
          </div>



          <div class="form-group">
            <label for="inputRECE_TEL" class="col-sm-2 control-label">Telefon:</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" name="4c40d2be-7f87-4faf-a6ba-0ff9b95be11b" id="inputRECE_TEL" value="" name1="cRECE_TEL">
            </div>
            <label for="inputRECE_MOB" class="col-sm-1 control-label">Mobilni tel.:</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" name="958d73bd-723b-4234-b625-1927e9cab407" id="inputRECE_MOB" value="" name1="cRECE_MOB">
            </div>
            <div class="col-sm-1">
            </div>

          </div>
          <div class="form-group">
            <label for="inputRECE_EML" class="col-sm-2 control-label">E-pošta:</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" name="4f653c8e-5613-449c-9b85-6850c8c857d7" id="inputRECE_EML" value="" name1="cRECE_EML">
            </div>
            <div class="col-sm-5">
            </div>

          </div>

          <div class="form-group">
            <label for="inputRECE_NTO" class="col-sm-2 control-label">Opomba:</label>
            <div class="col-sm-7">
              <textarea class="form-control" id="inputRECE_NTO" name="cRECE_NTO">Prevzel je:

2 kom line
2 kom corner</textarea>
            </div>

            <div class="col-sm-3">
            </div>
          </div>


          <div class="form-group">
            <label for="selectRECE_STA" class="col-sm-2 control-label">Status:</label>
            <div class="col-sm-2">
              <select id="selectRECE_STA" name="cRECE_STA" class="form-control">
                <option value="A" selected="">Osnutek</option>
                <option value="B">Izdan</option>
                <option value="9">Izbrisan</option>
              </select>
            </div>


            <div class="col-sm-8">
            </div>

          </div>






        </div>

        <div class="clearfix"></div>
        <div class="panel-body">
        </div>

      </div>
    </div>
  </div>



  </div>
</form>

Answer 2

由于在元素上应用了不同的类，因此元素（在您的Codepen代码中）具有不同的padding值，从而导致不同的距离/宽度。对所有相似的元素使用通用的类，并使用高度特定的CSS选择器使用通用的填充设置覆盖这些设置。