Adicionando borda a elemento div dimensionado com span em Twitter Bootstrap

Caso se adicione borda diretamento ao elemento dimensionado com o spanX em layout fixo do Twitter Bootstrap, o mesmo irá gerar quebra do layout, visto que os spanX possuem tamanho fixo. Ao adicionar a borda, a mesma é incrementada a este tamanho, o que gera a quebra do layout.

Uma das atuais possíveis formas de evitar a quebra de layout é utilizar borda em divs interna, conforme exemplo abaixo:

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}

O modo fluído de layout do Twitter Bootstrap não tem este problema e também pode ser utilizado como uma opção, conforme exemplo abaixo:

<div class="container">
    <div class="row-fluid">
        <div class="span4">a</div>
        <div class="span8">b</div>
    </div>
    <div class="row-fluid">
        <div class="span12">c</div>
    </div>
</div>

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: