ブートストラップ形アライメント

適切ではないブートストラップ形アライメント

次のコードは、フォームのために書かれているが、より適切に、ブートストラップに整列されていません。私は行のフォームを分割しましたが、私が理解していないことは、最初の列が正しく整列していないことです。私はたくさんのことを試みましたが、それを理解できませんでした。私はこれを問題なくできるように助けてください！あなたは行クラスを使用

<!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

2番目と3番目の入力フィールドが最初の入力フィールドよりも低いという問題があります。 – Lee

すべての行クラスを同じフォーマットに適用する必要があります。 'col-xs-4> form-group> col-sm-6' – Win

私はあなたの<form>にform-horizontalを追加し、あなたのすべてのラベルに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の振る舞いを変更しますので、追加の<div>

出典

2016-06-29 13:00:02

ブートストラップでは、** col-xx-xx **は常に** row **または** form-group **の内側になければなりません。主な理由は** col-xx-xx **は左右に15pxのパディングがあるため、行またはフォームグループを使用しない場合は左右の境界線で点滅しません。 – Win

私を避けることができrowを模倣するためにそれを引き起こし{% bootstrap_field form.attribute %}テンプレートタグを使用してdjango-bootstrap3を操作しているときにこれが発生しました。

問題は、多すぎるフォームグループタグを使用していることです。フォーム入力のグループ全体を囲むものだけが必要です。タグを削除し、現在-余分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>

これは私がウェブサーバの設定に右に見えます使用しています。

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

ブートストラップ形アライメント

答えて

関連する問題