Bootstrap : grid with variable number of columns - css

Question

I would like to add a divider between the columns in my grid.
The thing is, I can have between 1 and 4 columns. In the case I do only one, I don't want any divider.
Here is the current code I do have :
<div class='col-md-{$ NumberOfColumns $} my_class' data-ng-repeat='...'>
</div>
In the css, I can add something to my_class as :
.my_class {
border-left: 1px solid rgba(196, 187, 159, 0.63);
}
However, this border will appear even if I do have one column. Does bootstrap provide something to handle the divider more gently ?

Answer 1

You can use a CSS selector to "not" select elements that are the "only child" (i.e. single columns) like so:
selector:not(:only-child){}
Here is a snippet showing this code in action.
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>
You can see that the row with only one column does not get the left border, while the row with more than one column does get the left border.