html - tooltips - Twitter Bootstrap 3: Pequeña compensación/margen

tooltip jquery

Question

Estoy usando Twitter bootstrap 3. Lo que quiero es un margen entre dos divs que sea más pequeño que el tamaño de la cuadrícula (por lo que col-md-offset- * no funciona para esto).

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content">
        some other content
    </div>
</div>

Me preguntaba, ¿cuál es la forma de arranque de Twitter para lograr esto? Seguramente, uno podría simplemente definir los márgenes, pero eso rompería el diseño de la fila / columna de Twitter bootstrap, por lo que siento que debe haber una mejor solución.

Answer 1

Por defecto, cada columna tiene un relleno de 15px en ambos lados. Esto construye un canal de 15x2 = 30 píxeles. Hará visible la cuneta añadiendo un color de fondo a su contenido o columnas. Para hacer que el espacio sea más pequeño que col-md-offset-1, puede usar el anidamiento. Esto creará un espacio de col-md-offset-1 / 2. Para otra solución, podría usar la canaleta. Debido a que la canaleta es construida por relleno, podría manipular el espacio (relleno) sin romper la rejilla.

Vea algunos ejemplos a continuación. Agrego una barra lateral a su código para hacer visible que la grilla no está rota.

<div class="container">     

Your solution:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content" style="background-color:orange">
        some other content
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

half size with nesting:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div class="row">
            <div id="content" class="col-md-offset-1 col-md-11 content content" style="background-color:pink">
                some other content
            </div>  
        </div>  
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

space of the gutter:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

Manipulated space of the gutter, using padding won''t break the grid:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange; padding-left:1px; padding-right:0">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

Puede compilar su propia grilla y elegir una canaleta con la que se ajuste a sus necesidades en: http://getbootstrap.com/customize/