スパンの間隔が正しくないdivs

Question

私はブートストラップのグリッドを使って構造体のような表を模倣しています。スパンは2行のスペースをとり、期待どおりに見えますが、余分なスペースをdivに追加しようとすると、それをトップに追加するように見えます。

それぞれのダイビングの後にスペースが必要なので、一緒に少しずつグループになっているように見えます。この構造に従う方法はありますか？

https://jsfiddle.net/daltonj1130/7Ltstbhp/

var h = $('#x').height(); 
 
console.log(h); 
 
$('.dclass').css('padding-bottom', 2 * h + 1).css('border', '1px solid grey')

.dclass { 
 
    margin-bottom: 10px; 
 
}

<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/1.11.0/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="dclass"> 
 
    <span id="x" class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;"> 
 
    Action 
 
    <select class="form-control" name="act1"> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;"> 
 
    Pay Type 
 
    <select class="form-control" name="act2"> 
 
     <option value=""></option> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Date 
 
    <input type="text" name="act3" class="form-control" value="date"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Start Time 
 
    <input type="time" name="act4" class="form-control" value="act4"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">End Time 
 
    <input type="time" name="act5" class="form-control" value="act5"></span> 
 
</div> 
 

 
<div class="dclass"> 
 
    <span class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;">Action 
 
    <input type="hidden" name="act" value="act"/> 
 
    <select class="form-control" name="act1"> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;">Pay Type 
 
    <select class="form-control" name="act2"> 
 
     <option value=""></option> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Date 
 
    <input type="text" name="act3" class="form-control" value="date"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Start Time 
 
    <input type="time" name="act4" class="form-control" value="act4"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">End Time 
 
    <input type="time" name="act5" class="form-control" value="act5"></span> 
 
</div> 
 

 
<div class="dclass"> 
 
    <span class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;"> 
 
    Action 
 
    <select class="form-control" name="act1"> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-6 col-sm-6 col-md-3 col-lg-6" style="padding:0;">Pay Type 
 
    <select class="form-control" name="act2"> 
 
     <option value=""></option> 
 
    </select> 
 
    </span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Date 
 
    <input type="text" name="act3" class="form-control" value="date"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">Start Time 
 
    <input type="time" name="act4" class="form-control" value="act4"></span> 
 
    <span class="col-xs-4 col-sm-4 col-md-2 col-lg-4" style="padding:0;">End Time 
 
    <input type="time" name="act5" class="form-control" value="act5"></span> 
 
</div>

Answer 1

divのパディングボトムをスパンの高さに設定する修正が見つかりました。私はその後、各divの間にスペースを追加する余白を追加しました

Answer 2

あなたのdivには高さがありません。原因がわからない場合は、スタイルやクラスなどにheight:auto !importantを挿入してください。