引導形式取向不正確

下面的代碼爲形式寫入但是從沒有正確引導對齊。雖然我已經把表格分成幾行但我不明白的是第一列怎麼沒有正確對齊。我嘗試了很多東西，但無法弄清楚。 Pl幫我做好了！

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head> 
<body> 

<div class="container-fluid"> 
<form > 
<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Roll number:</label> 
<div class="col-sm-2"> 
<input type="text" class="form-control" > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">School code:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Year Of Passing:</label> 
<div class="col-sm-2"><input type="text" class="form-control" > 
</div></div></div> 

<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">First Name:</label> 
<div class="col-sm-2"> <input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Middle Name:</label> 
<div class="col-sm-2"> <input type="text" class="form-control" > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Last Name:</label> 
<div class="col-sm-2"> <input type="text" class="form-control" > 
</div></div> 
</div> 


<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Father's First name:</label> 
<div class="col-sm-2"><input type="text" class="form-control" > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Father's Middle name:</label> 
<div class="col-sm-2"> <input type="text" class="form-control " > 
</div></div> 

<div class="form-group "> 
<label class="col-sm-2 ">Father's Last name:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

</div> 

<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Mother's First name:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Mother's Middle name:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Mother's Last name:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div> 
</div> 
</div> 

<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Gender:</label> 
<div class="col-sm-2"><select class="form-control" > 
<option>Male</option> 
<option>Female</option> 

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

<div class="form-group"> 
<label class="col-sm-2 ">Mobile Number:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Aadhar Number:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 
</div> 


<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Email:</label> 
<div class="col-sm-2"><input type="email" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">DOB:</label> 

<div class="col-sm-1"><select class="form-control " > 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>9</option> 
<option>10</option> 
<option>11</option> 
<option>12</option> 
<option>13</option> 
<option>14</option> 
<option>15</option> 
<option>16</option> 
<option>17</option> 
<option>18</option> 
<option>19</option> 
<option>20</option> 
<option>21</option> 
<option>22</option> 
<option>23</option> 
<option>24</option> 
<option>25</option> 
<option>26</option> 
<option>27</option> 
<option>28</option> 
<option>29</option> 
<option>30</option> 
<option>31</option> 

</select> 
</div> 
<div class="col-sm-2"><select class="form-control " > 
<option>Jan</option> 
<option>Feb</option> 
<option>Mar</option> 
<option>Apr</option> 
<option>May</option> 
<option>Jun</option> 
<option>Jul</option> 
<option>Aug</option> 
<option>Sep</option> 
<option>Oct</option> 
<option>Nov</option> 
<option>Dec</option> 

</select> 
</div> 

<div class="col-sm-2"><select class="form-control " > 
<option>2000</option> 
<option>2001</option> 
<option>2002</option> 
<option>2003</option> 
<option>2004</option> 
<option>2005</option> 
<option>2006</option> 
<option>2007</option> 
<option>2008</option> 
<option>2009</option> 
<option>2010</option> 
<option>2011</option> 
<option>2012</option> 
<option>2013</option> 
<option>2014</option> 
<option>2015</option> 
<option>2016</option>  
</select> 
</div></div> 
</div> 

<div class="row"> 
<div class="form-group"> 
<label class="col-sm-2 ">Religion:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 



<div class="form-group"> 
<label class="col-sm-2 ">Age:</label> 
<div class="col-sm-2"><input type="text" class="form-control " > 
</div></div> 

<div class="form-group"> 
<label class="col-sm-2 ">Category:</label> 
<div class="col-sm-2"> <input type="text" class="form-control " > 
</div></div></div> 

</form> 

</body> 
</html>

來源

2016-06-29 XOR

方式使用行類是不正確的。它應該是 -

row > col-xs-4 > form-group > col-sm-6 


<div class="row"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      <label class="col-sm-6">Roll number:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      <label class="col-sm-6">School code:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control "> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      <label class="col-sm-6">Year Of Passing:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 
</div>

的jsfiddle與形式水平和控制標籤。

https://jsfiddle.net/g6ryga19/

來源

2016-06-29 12:52:18 Win

有仍然是一個問題對準與所述第二和第三輸入場是比第一個下。 – Lee

您必須將所有行類應用於相同的格式。 'row> col-xs-4> form-group> col-sm-6' – Win

根據您的佈局，我建議增加form-horizontal您<form>並添加control-label您的所有標籤。此外，我將重新組織你的形式爲3個獨立的欄目，像這樣：

<form class="form form-horizontal"> 

<div class="col-sm-4"> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">Roll number:</label> 
     <div class="col-sm-9"><input type="text" class="form-control" ></div> 
    </div> 
</div> 

<div class="col-sm-4"> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">School code:</label> 
     <div class="col-sm-9"><input type="text" class="form-control " ></div> 
    </div> 
</div> 

<div class="col-sm-4"> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">Year Of Passing:</label> 
     <div class="col-sm-9"><input type="text" class="form-control" ></div> 
    </div> 
</div> 

</form>

注：form-horizontal改變的form-group行爲並使其模仿row這樣就可以避免額外的<div>

來源

2016-06-29 13:00:02

在Bootstrap中，** col-xx-xx **應該總是在** row **或** form-group **內。主要原因是** col-xx-xx **有15px的左右填充，所以沒有row或form-group它不會以左右邊框閃爍。 – Win

我在使用django-bootstrap3時遇到此問題，使用{% bootstrap_field form.attribute %}模板標記。

問題是您使用的表單組標籤過多。你只需要圍繞整組表單輸入。刪除標記，並刪除現已多餘的div後，我得到了下面的代碼，這使得沒有第二次及以後的列錯位相對於第一：

<div class="container-fluid"> 
     <form > 
      <div class="form-group"> 
       <div class="row"> 
         <label class="col-sm-2 ">Roll number:</label> 
         <div class="col-sm-2"><input type="text" class="form-control" ></div> 
         <label class="col-sm-2 ">School code:</label> 
         <div class="col-sm-2"><input type="text" class="form-control " ></div> 
         <label class="col-sm-2 ">Year Of Passing:</label> 
         <div class="col-sm-2"><input type="text" class="form-control" ></div> 
       </div> 
       <div class="row"> 
         <label class="col-sm-2 ">First Name:</label> 
         <div class="col-sm-2"> <input type="text" class="form-control " ></div> 
         <label class="col-sm-2 ">Middle Name:</label> 
         <div class="col-sm-2"> <input type="text" class="form-control" ></div> 
         <label class="col-sm-2 ">Last Name:</label> 
         <div class="col-sm-2"> <input type="text" class="form-control" ></div> 
       </div> 
      </div> 
     </form> 
    </div>

這種權利看起來在web服務器上設置我正在使用。

我遇到了這個問題，因爲我將django-bootstrap {% bootstrap_field form.attribute %}標籤分組到行中，但默認行爲是爲每個表單字段創建一個帶有form-group標籤的div。我推翻它使用form_group_class=""實施例：

{% bootstrap_field form.jobNum form_group_class="" field_class="col-md-3" label_class="col-md-2 text-right" %}

來源

2017-03-09 22:19:41

引導形式取向不正確

回答

相關問題