html - 将 border-bottom 添加到动态 Bootstrap 列

Question

我正在使用 Bootstrap 动态创建列。我有一个创建以下列的 for 循环:

<div class="col-md-6 col-xs-12 inspection-category-col">
  <div class="media inspection-category"> 
    <div class="media-left">
      <a href="#">
        <img src="http://placehold.it/100x100">
      </a> 
    </div> 
    <div class="media-body inspection-category-media-body"> 
      <h3 class="media-heading inspection-category-media-heading">{{ item.title }}</h3>
      <span class="inspection-category-media-content"> 
        {{ item.description }}
      </span>
    </div>
  </div>
</div>

我想在每列之间添加一个底部边框，但由于我不知道列数我需要处理以下逻辑:

if screen md/lg && count(cols) > 2 && not last one or two cols
  add border-bottom
else if screen xs && not last col
  add border bottom
else 
  do nothing

我不确定处理此问题的最佳方法。理想情况下通过 CSS，但我不确定如何。提前致谢。

Answer 1

根据您的逻辑，我们可以将其分解为更小的步骤。

首先，屏幕尺寸。为此，我们使用 css 媒体查询。在这里，我将大屏幕定义为超过 600 像素宽，将小屏幕定义为小于 600 像素宽。您可以更改它以满足您的需要。

@media (min-width: 600px) {
  /* large code here */
}
@media (max-width: 600px) {
  /* small code here */
}

然后我们需要边框逻辑，首先用于较大的屏幕。在这里，我假设它们都有一个 myColumn 类。

.myColumn:nth-last-of-type(n+3) {
    border-bottom:1px solid black
}

:nth-last-of-type 从列表末尾选择括号中的元素数量。 n+3 表示从列表中的第二个元素中选择，即跳过两个然后选择从末尾开始的第三个元素，如果它们具有 class myColumn

使用

.myColumn:nth-last-of-type(n+2) {
    border-bottom:1px solid black
}

适用于较小的屏幕。

你可以把选择器弄得乱七八糟here

您可以阅读有关媒体查询的更多信息 here