葉なし不要クラス行内の要素間の空白

Question

実際に問題の記述方法はわかりません。私はクラスrowのいくつかの要素を指定したモデルを設計しました。しかし、3つの要素の後には不要なスペースが残されます。ブートストラップクラスrowに問題はありますか？ Checkout the link. Click on register

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-sm-4 standard"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 school_name"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 occupation"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 father_income"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 blood_group"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 type_of_wastage"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 photo"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 edit_photo" style="display: none;"> 
 
    <div class="form-group"> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 city"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 address"> 
 
    <div class="form-group"> 
 
    </div> 
 
    </div> 
 

 

 
</div>

Answer 1

ブートストラップグリッド構文が間違っています。ブートストラップの行には12個の列があります。行内に既に12の列がある場合は、新しい行を開く必要があります。あなたの場合、col-sm-4クラスを3回使用した後に新しい行を開く必要があります。だから、次のようになります。

<div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div> 
<div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div> 

Answer 2

セットはいくつかのmin-heightレジスタ

.modal-body .col-sm-4 { 
    min-height: 86px; 
} 

Answer 3

内のすべての列にあなたが一列にすべてのこれらの列を置くことはできません。 col-sm-4では、行ごとに3列しか持てません。その後、別の行を作成する必要があります。ブートストラップグリッドシステムでは、1行に12列あります。 1列にすべてのホースが必要な場合は、col-sm-1を使用する必要があります。しかし、私はそれが良い考えだとは思わない。あなたがここに10の要素を持っているので、4行にcol-sm-4を使うか、3行にcol-sm-3を使うのが良いでしょう。

Answer 4

構文が間違っています。ブートストラップの1行には12ブロックしか含まれていません。そのため、不要なスペースが表示されています。