Bootstrap: variable column grid

Question

I would like to add a separator between the columns in my grid. The fact is that I can have from 1 to 4 columns. In the case when I do only one, I do not want a divisor.

Here is the current code that I have:

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

In css, I can add something to my_class like:

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

However, this border will appear even if I have one column. Does bootstrap install something to handle the divider more gently?

Answer 1

You can use the CSS selector to “not” select elements that are “single child” (for example, single columns):

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>

Run codeHide result

, , .