css - Bootstrap : grid with variable number of columns

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 是否提供了一些更温和地处理分隔线的东西？

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>

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