Bootstrap表格對齊問題
[英]Bootstrap Form Alignment Issues
問題描述
我剛剛開始使用引導程序。 最終，我想創建一個可以在所有外形尺寸上使用的網頁。
在此頁面中，我將創建一個包含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>
2 個解決方案
解決方案1
1 已采納 2017-07-26 18:57:03
在這里您可以找到解決方案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>
解決方案2
0 2017-07-26 19:01:34
這是未對齊的，來自form-group類margin-bottom: 15px css規則。 您可以在沒有此類的情況下使用表單，或者使用margin-bottom: 0為這些表單組創建類。
我還建議為輸入設置100%寬度，或使用bootstrap類的form-control來避免列重疊。
PS檢查form-horizontal幫助程序類，也許它將對您更有用。 我使用form-horizontal JSFiddle稍微更改了您的示例
引導程序3：創建表單時出現對齊問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.