🥇 Cinco colunas iguais no Bootstrap 3 (uma linha, uma propriedade CSS)

A solução com linhas aninhadas funciona bem, mas na verdade o problema pode ser resolvido com mais facilidade.

As classes de bootstrap para colunas diferem apenas pela widthpropriedade. Portanto, podemos apenas redefinir essa propriedade para nosso propósito. Seria o suficiente.

@media (min-width: 768px) {
  .ten-columns > .col-sm-2 {
    width: 20% !important;
  }
}

<div class="container-fluid">
  <div class="row ten-columns">
    <div class="col-sm-2">1</div>
    <div class="col-sm-2">2</div>
    <div class="col-sm-2">3</div>
    <div class="col-sm-2">4</div>
    <div class="col-sm-2">5</div>
  </div>
</div>

Verifique o resultado: http://codepen.io/glebkema/pen/LRWpBm

Related Posts