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>

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

Bootstrap：具有可变列数的网格

1 个答案: