Bootstrap：可变列数的网格布局

Question

我想在我的网格中的列之间添加分隔符。问题是，我可以有1到4列。如果只有一列，我不想要任何分隔符。

这是我目前拥有的代码:

<div class='col-md-{$ NumberOfColumns $} my_class' data-ng-repeat='...'>
 </div>

在CSS中，我可以将一些内容添加到我的类my_class中:

.my_class {
    border-left: 1px solid rgba(196, 187, 159, 0.63);
}

然而，即使我只有一列，此边框也会出现。Bootstrap 是否提供了更温和处理分隔线的方法？

- Scipion

---

你可以使用条件语句。只有当NumberOfColumns的值大于1时，才需要添加my_class。 - Manwal

Answer 1

您可以使用CSS选择器来“不”选择单列（即单个列）的元素，如下所示：selector:not(:only-child){}。以下是一个演示此代码的片段。

div{clear:both;}

.col{
  width:100px; 
  background: yellow;
  float:left;
  margin:10px;
  clear:none;
  }

.col:not(:only-child){border-left:5px solid red;}

<div>
  <div class="col">1 col</div>
</div>

<div>
  <div class="col">1 col</div>
  <div class="col">2 col</div>
</div>

您可以看到，只有一列的行没有左边框，而多于一列的行则有左边框。

- xengravity