Question

我正在使用Bootstrap创建响应式模板。我有多个项目连续排列，因此根据分辨率，一行中可以有不同数量的项目，相应的行数可以不同。

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  ...
</div> <!-- / .row -->

每个项目都有一个底部边距，因此它们不会垂直粘在一起：

.item {
  margin-bottom: 20px;
}

有没有办法将底部边距设置为＆＃34; 0＆＃34;对于最后一行的所有项目？（我们不知道哪些项目将在不同分辨率的最后一行）。

PS：不要对.row容器感到困惑。这并不意味着内部的div是单行。这只是.col - 容器的包装。

JSFiddle：http://jsfiddle.net/m668fska/

Answer 1

在行中添加一个负余量底部 - 这样所有项目（包括最后一行）都会向下推，该行会将其拉回。

Answer 2

从技术上讲，既然你正在尝试复制一个表，你只需要在该行中添加一个样式;

.row {
    margin-bottom:20px;
}

然后

覆盖表格的最后一行;

.table:last-child {
    margin-bottom:0px;
}

每个.row，除了最后一个，都会有一些余量，只在底部。

Answer 3

据我所知，没有纯CSS解决方案......

...所以这是我对JavaScript解决方案的看法：将每个项目的偏移顶部与最后一个项目的偏移顶部进行比较，并相应地分配类名。

 // tries to adjust margin-bottom of last-row elements.
function manage_last_row_items(){

  $('.last_row_management').each(function(){
    var
      $context = $(this),
      item_selector = $context.data('item_selector'),
      $last_item = $context.find(item_selector +':last-of-type').addClass('last_row_item'),
      final_top = $last_item.offset()  ? $last_item.offset().top  : 0
    ;
    $context.find(item_selector)
      .not($last_item)
        .removeClass('last_row_item')
        .filter(function(){
          var
            o = $(this).offset(),
            decision = false
          ;
          if (o) {
            decision = o.top === final_top;
          }

          return decision;
        })
          .addClass('last_row_item')
    ;
  });  // end of ( each )
}



$(document).ready(function(){
  manage_last_row_items();
  $(window).resize(manage_last_row_items);
});

假设这个DOM：

<ul class="last_row_management" data-item_selector="li">
…
</ul>

<form class="last_row_management" data-item_selector="fieldset">
…
</form>

Fiddle

（此时，实际上还可以处理最后一列项目......）（¬_¬）

设置＆＃34; margin-bottom＆＃34;到＆＃34; 0＆＃34;对于最后一行的所有元素（响应式布局）

3 个答案: