我想在我的网格中的列之间添加一个分隔符。 问题是,我可以有 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 是否提供了一些更温和地处理分隔线的东西?
最佳答案
您可以使用 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>
可以看到只有一列的行没有左边框,而多列的行有左边框。
关于css - Bootstrap : grid with variable number of columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29772965/