html - Bootstrap 3 中行类的奇怪行为

Question

今天，我在表单设计中遇到了一个奇怪的问题。我正在使用 bootstrap 3，在我的 HTML 代码中，我已将 row 类分配给各种 div。我面临的问题是两个具有相同类的 div 的行为不同。

<form class="form-horizontal" id="frmcreatebank" role="form">
     <div class="row">
        <div class="col col-sm-6 form-group-sm">
            <div class="form-group" style="text-align:left;">
                <label class="col-sm-5" for="BANKROUTENO">
                      BANKROUTE NO :
                </label>
            <div class="col-sm-7 form-group">
                      @Html.TextBox("TXT_BANKROUTENO", null, null, new { @class = "form-control validate[required] minSize[9] number", maxLength = 9, data_width = "100%" })
            </div>
      </div>
  </div>
  <div class="col col-sm-6 form-group-sm">
      <div class="form-group" style="text-align:left;">
          <label class="col col-sm-5" for="BANKNAME">
                BANK NAME :
          </label>
      <div class="col-sm-7">
      <div class="form-group">
          @Html.TextBox("TXT_BANKNAME", null, null, new { @class = "form-control validate[required]", maxLength = 50 })
      </div>
 </div>
 </div>
 </div>
 </div>
 <div class="row">
     <div class="col col-sm-4 form-group-sm">
        <div class="form-group" style="text-align:left;">
            <label class="col col-sm-5" for="ADD1">
                  ADDRESS(1) :
            </label>
        <div class="col col-sm-7">
            @Html.TextBox("TXT_ADD1", null, null, new { @class = "form-control validate[required]", maxLength = 50 })
        </div>
     </div>
     </div>
     <div class="col col-sm-4 form-group-sm">
         <div class="form-group" style="text-align:left;">
             <label for="ADD2" class="col col-sm-5">
                  ADDRESS(2) :
             </label>
         <div class="col col-sm-7">
             @Html.TextBox("TXT_ADD2", null, null, new { @class = "form-control", maxLength = 50 })
         </div>
     </div>
     </div>
     <div class="col col-sm-4 form-group-sm">
         <div class="form-group" style="text-align:left;">
             <label class="col col-sm-5" for="ADD3">
                   ADDRESS(3) :
             </label>
         <div class="col col-sm-7">
             @Html.TextBox("TXT_ADD3", null, null, new { @class = "form-control", maxLength = 50 })
         </div>
     </div>
     </div>
     </div>
     <div class="row">
         <div class="col col-sm-4 form-group-sm">
            <div class="form-group" style="text-align:left;">
                <label class="col col-sm-5" for="PINCODE">
                     PINCODE :
                </label>
            <div class="col col-sm-7">
                @Html.TextBox("TXT_PINCODE", null, null, new { @class = "form-control validate[required] minSize[6] number", maxLength = 6 })
            </div>
      </div>
 </div>
  <div class="col col-sm-4 form-group-sm">
      <div class="form-group">
          <label class="col col-sm-5" for="CITY">CITY :</label>
          <div class="col col-sm-7">
             @Html.DropDownList("DDL_CITY", new SelectList(ViewBag.TypeList, "CODE", "LONGDESC"), "-- Select City --", new { @class = "selectpicker validate[required]", data_width = "100%" })
           </div>
       </div>
   </div>
   <div class="col col-sm-4 form-group-sm">
       <div class="form-group" style="text-align:left;">
           <label class="col col-sm-5" for="EMAIL">
                 EMAIL :
           </label>
        <div class="col col-sm-7">
    <div class="form-group">
        @Html.TextBox("TXT_EMAIL", null, new { @class = "form-control validate[required,custom[email]]" })
    </div>
    </div>
    </div>
    </div>
        </div>
   <div class="row">
   <div class="col col-sm-4 form-group-sm">
       <div class="form-group" style="text-align:left;">
           <label class="col col-sm-5" for="TELEPHONE1">
                 TELEPHONE(1) :
           </label>
       <div class="col col-sm-7">
           <div class="form-group">
              @Html.TextBox("TXT_TELEPHONE1", null, new { @class = "form-control validate[required] number", maxLength = 12 })
           </div>
       </div>
       </div>
       </div>
         <div class="col col-sm-4 form-group-sm">
             <div class="form-group" style="text-align:left;">
                 <label class="col col-sm-5" for="TELEPHONE2">
                       TELEPHONE(2) :
                 </label>
              <div class="col col-sm-7">
                  <div class="form-group">
                      @Html.TextBox("TXT_TELEPHONE2", null, new { @class = "form-control number", maxLength = 12 })
                  </div>
              </div>
          </div>
      </div>
   <div class="col-sm-4 form-group-sm">
      <div class="form-group" style="text-align:left;">
          <label class="col col-sm-5" for="MOBILE">
                MOBILE :
          </label>
       <div class="col col-sm-7">
     <div class="form-group">
         @Html.TextBox("TXT_MOBILE", null, new { @class = "form-control number", maxLength = 10 })
      </div>
      </div>
      </div>
      </div>
      </div>
  </form>

这里的问题是两行之间有很多间隙。

此屏幕截图中说明了问题。

如您所见，第一行和第二行之间的间隙太大。我希望这个间隙与第二行和第三行之间的间隙相同。

我们将不胜感激。

Answer 1

不确定您是否看过代码并将第一行与第二行/第三行进行比较。第一行和第二行之间有明显的区别。

例如，您使用了带有 BANKROUTE NO 的 form-group:输入和围绕 BANK NAME 的完整 div:带有 form-group 的输入。只需要删除这两个类。