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

希望这会起作用

    <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">
                      @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">
                      @Html.TextBox("TXT_BANKNAME", null, null, new { @class = "form-control validate[required]", 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="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">
                @Html.TextBox("TXT_EMAIL", null, new { @class = "form-control validate[required,custom[email]]" })
            </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 2

不确定您是否看过代码并将第一行与第二/第三行进行比较。第一行和第二行之间存在明显差异。

例如，您已将form-group与BANKROUTE NO：输入一起使用，并将完整的div包裹在BANK NAME：输入form-group。只需要删除这两个类。

引导程序3中行类的奇怪行为

2 个答案: