Bootstrap表單調整問題

我剛開始使用bootstrap。最終，我想創建一個可以處理所有形式因素的網頁。Bootstrap表單調整問題

有了這個頁面，我創建了一個2行，每行3列的表單。當我放大視圖時，第二列和第三列中的字段未對齊。有沒有人有建議？

這裏是我的Jsfiddle，並且這裏的HTML：

<body> 
    <div class="container body-content"> 
    <div class="container-fluid"> 
     <form action="/Bills/AddBill" method="post"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     </div> 

     <div id="row1 " class="row"> 
      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="User_Id:">User Id:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9"> 
       <input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg"> 
      </div> 

      </div> 

      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="Bill_Dt:">Bill Dt:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left"> 
       <input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM"> 
      </div> 

      </div> 

      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="Ship_Dt:">Ship Dt:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left"> 
       <input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value=""> 
      </div> 

      </div> 
     </div> 

     <div id="row2 " class="row"> 
      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="SCAC:">SCAC:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left"> 
       <input class="text-box single-line" id="SCAC" name="SCAC" type="text" value=""> 
      </div> 

      </div> 

      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="Pro_Number:">Pro Number:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9"> 
       <input class="text-box single-line" id="ProNum" name="ProNum" type="text" value=""> 
      </div> 

      </div> 

      <div class="form-group"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left"> 
       <label for="Bill_of_Laden:">Bill of Laden:</label> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9"> 
       <input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value=""> 
      </div> 

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

    <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> 
</body>

來源

2017-07-26 user2011126

在這裏，你去了一個解決方案https://jsfiddle.net/va7mh47m/9/

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <form action="/Bills/AddBill" method="post"> 
 
    <div id="row1" class="row"> 
 
     
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="User_Id:">User Id:</label> 
 
      <input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg"> 
 
     </div> 
 
     </div> 
 
    
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="Bill_Dt:">Bill Dt:</label> 
 
      <input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM"> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="Ship_Dt:">Ship Dt:</label> 
 
      <input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value=""> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="row2 " class="row"> 
 
     
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="SCAC:">SCAC:</label> 
 
      <input class="text-box single-line" id="SCAC" name="SCAC" type="text" value=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="Pro_Number:">Pro Number:</label> 
 
      <input class="text-box single-line" id="ProNum" name="ProNum" type="text" value=""> 
 
     </div> 
 
     </div> 
 
    
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <div class="form-group"> 
 
      <label for="Bill_of_Laden:">Bill of Laden:</label> 
 
      <input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value=""> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

來源

2017-07-26 18:57:03 Shiladitya

這樣做了。謝謝您的幫助。 – user2011126

這是失準距離form-group類來margin-bottom: 15px css規則。您可以使用的形式工作，而這一類，如果有必要或創建類，這些形式的組，margin-bottom: 0

此外，我建議成立100%寬度爲輸入或使用引導類form-control避免重複列。

P.S.檢查form-horizontal助手類也許它會對你更有用。我稍微改變了你的例子form-horizontalJSFiddle

來源

2017-07-26 19:01:34

Bootstrap表單調整問題

回答

相關問題