Question

出于某种原因，我无法在Bootstrap中的列上使用:first-child / :last-child。

在标记下方生成三个带内容的div，所有div都具有相同的类。

我正在尝试从.feed-item类的最后一个子节点中删除第一个子节点的左边距和右边节点：

<div class="blog-item-container">
    <?php foreach ($feed->get_items(0, 3) as $item): ?>

    <div class="feed-item col-sm-4 col-md-4">
        <!-- Content -->
    </div>
</div>

因此生成的标记如下所示：

<div class="blog-item-container">
    <div class="feed-item col-sm-4 col-md-4">
        <!-- Content -->
    </div>

    <div class="feed-item col-sm-4 col-md-4">
        <!-- Content -->
    </div>

    <div class="feed-item col-sm-4 col-md-4">
        <!-- Content -->
    </div>
</div>

Answer 1

这个css更简单：

.row > div[class^="col-"]:first-child{padding-left:0;}

对于以col-开头的班级名称的每一个第一个孩子，请删除左侧填充。

Answer 2

.blog-item-container .col-sm-4:first-child,
.blog-item-container .col-md-4:first-child{
     padding-left: 0;
}

.blog-item-container .col-sm-4:last-child,
.blog-item-container .col-md-4:last-child{
     padding-right: 0;
}

那些应该适合你。如果没有，请尝试添加！important（通常建议但在覆盖Bootstrap样式时有时是必要的）到每个样式规则的末尾。

Answer 3

我自己正在努力解决这个问题，因为我必须遵循只有内部装订线的设计指南。

我们可以将@ JesseEarley的方法用于行的第一个孩子列，并将 last-child 用于除IE8之外的所有内容。要仅影响少量性能，我们需要检查浏览器是否为IE8：

<!--[if IE 8]><html xmlns="http://www.w3.org/1999/xhtml" class="lt-ie10 ie8" lang="en"><![endif]-->
<!--[if IE 9]><html xmlns="http://www.w3.org/1999/xhtml" class="lt-ie10 ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!--<![endif]-->

现在使用jQuery，检查是否存在 .ie8 ，如果存在，请使用jQuery的 last 方法从每行的最后一列中删除padding-right：

jQuery.fn.exists = function () { return this.length > 0; }

// bootstrap last column remove padding-right (IE8)
$(function () {
  if ($('.ie8').exists()) {
    $('.row').each(function () {
      $(this).children().last().css('padding-right', '0');
    });
  }
});

Bootstrap 3 - 是否可以删除col-的填充：first-child和last：child？

3 个答案: