Centrar tramos "impares" con la red Twitter Bootstrap

Question

Jugué un poco con bootstrap, luego encontré este molesto problema sobre cómo centrar una clase de tramo. Después de intentar compensar para centrar algún tramo, puedo centrar una cierta clase de tramo como (span8 con desplazamiento2, o span6 con desplazamiento 3), pero el problema es que quiero centrar el span7/span9/span10.

Entonces tratando de utilizar algunos trucos para centrar el span10 ...

<div class="container"> <!--Or span12 since the width are same--> 
    <div class="row"> 
    <div class="span1" style="background:black;">Dummy</div> 
    <div class="span10" style="background:blue;">The Real One</div> 
    <div class="span1" style="background:black;">Dummy</div> 
    </div> 
</div> 

¿Hay alguna solución en lugar de utilizar el código anterior?

¿Y qué debo hacer si quiero centrar span7, span9 o incluso span11 sin cambiar el valor de margen de la fila izquierda? Debido a que la fila de la clase ya establece el margen izquierdo en 20px, eso me dificulta centrar el tramo.

Answer 1

Centrado "par" .spanN? Utilice .offsetN

<div class="span10 offset1"> 

Centrado "extraño" .spanN? Imposible usar los recursos del marco. Cuando decidió usar Twitter Bootstrap, asumió que trabajaba con una grilla. Si centra un elemento de ancho de columna "impar", está rompiendo la cuadrícula, por lo que no hay herramientas de Bootstrap para hacerlo.

Hay una solución teórica (pero extraña): duplicar el recuento de columnas. En un diseño de 24 columnas, un .span7 se convierte en span14, que se puede centrar con un .offset5.

Answer 2

Esperemos que esto no sea un problema en Bootstrap 3, pero para Bootstrap 2.x he encontrado una solución de CSS que crea un 'medio' desplazamiento que se puede usar para centrar (casi) números impares de tramos Estos tramos medio crean un porcentaje que es la mitad de la norma offsetX en el bootstrap.css

/* odd span centering helpers */ 

    .row-fluid .offsetHalf {margin-left:8.5% !important;} 
    .row-fluid .offsetHalf1 {margin-left:12.9% !important;} 
    .row-fluid .offsetHalf2 {margin-left:21.6% !important;} 
    .row-fluid .offsetHalf3 {margin-left:25.6% !important;} 

Link to demo