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>

我想在每列之间添加一个border-bottom，但由于我不知道我需要处理以下逻辑的列数：

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媒体查询。在这里，我定义了一个超过600px宽的大屏幕和一个宽度不足600px的小屏幕。你可以根据自己的需要改变它。

- (void)scrollWheel:(NSEvent *)theEvent
{
    [super scrollWheel:theEvent];

    NSLog(@"user scrolled %f horizontally and %f vertically", [theEvent deltaX], [theEvent deltaY]);
}

然后我们需要边界逻辑，首先是更大的屏幕。在这里，我假设他们都有一个myColumn类。

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

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

使用

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

适用于较小的屏幕。

您可以更多地使用选择器here

您可以详细了解媒体查询here

将border-bottom添加到动态Bootstrap列

1 个答案: