Question

我正在使用bootstrap的网格来模仿像结构一样的表格。跨度占用两行空间并且看起来像预期的那样但如果我尝试在包含div中添加margin-bottom，它似乎将它添加到顶部。

我希望每次潜水后都有空间，所以他们看起来更加集中在一起。有没有办法在这个结构之后做到这一点？

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没有身高。如果您不知道原因，只需将height:auto !important插入其样式或类或其他内容。

Answer 2

我最终找到了一个修复程序，将div的padding-bottom设置为其中跨距的高度。然后我添加了一个margin-bottom来在每个div之间添加空间

div内跨距不正确

2 个答案: