将最后一行的所有元素的“margin-bottom”设置为“0”（响应式布局）答案

【问题标题】：Set "margin-bottom" to "0" for all elements on the last row (responsive layout)将最后一行的所有元素的“margin-bottom”设置为“0”（响应式布局）
【发布时间】：2015-07-08 15:52:45
【问题描述】：

我正在使用 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;
}

有没有办法将最后一行的所有项目的下边距设置为“0”？（假设我们不知道在不同分辨率下最后一行中会出现哪些项目）。

PS：不要与 .row 容器混淆。这并不意味着里面的 div 是单行的。这只是 .col- 容器的包装器。

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

【问题讨论】：

每列是否有多个item 类？你为什么不用桌子？
我使用的是标准的 Bootstrap 网格，不确定表格是否适合响应式布局。
你想定位到最后一个带有“item”类的 div。
带有bootstrap的表
不，我想定位位于最后一行的 div。

标签： html css twitter-bootstrap

【解决方案1】：

为该行添加一个负边距底部 - 这样您的所有项目（包括最后一行）都会向下推，该行会将其拉回。

【讨论】：

【解决方案2】：

使用match bootstrap's 的媒体查询，比如

/* Large desktop */
@media (min-width: 768px) {
    div.row>div.col-xs-6.col-sm-4.col-md-3:nth-last-child(-n+4)>div.item{
        margin-bottom:0;
    }
}

除了使用nth-last-child(-n+3) 和nth-last-child(-n+2) 之外，以下情况同上：

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

【讨论】：

是margin-bottom 不是bottom-margin developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
如果我理解正确，这将只针对最后一个 div.col-xs-12...。我想要的是针对最后一行的所有 .col-xs-12 .....div。
误会了，抱歉。固定。
仍然不是解决方案，因为行容器内的 .col-* div 可以根据屏幕分辨率分成几行，这就是问题所在。
啊，我明白了，所以你有 4 个div.col-* div 用于最宽的屏幕尺寸，然后是 3 和 2 用于更小的屏幕尺寸。然后查看我的更新答案。

【解决方案3】：

从技术上讲，由于您正在尝试复制一个表格，您只需向该行添加一个样式；

.row {
    margin-bottom:20px;
}

然后覆盖表格的最后一行；

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

每个.row，除了最后一个，都会有一些边距，并且只在底部。

【讨论】：

【解决方案4】：

据我所知，没有纯 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

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

【讨论】：