css - español - bootstrap tutorial

¿Por qué la clase bootsrowp.row tiene un margen predeterminado-left de-30px?

Question

Cuando hago boostrap tengo que usar la clase "row" ...

Cuando miras el diseño de prueba:

¿Por qué estoy forzado con un margen izquierdo de -30px?

Con este html esperaría 3 filas compartiendo cada columna 33% del ancho total disponible:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

El área gris con los botones es de este código:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: ''entrance'' } -->
    <!-- /ko -->
</div>

1. ¿Por qué todo el diseño de 3 columnas se junta cuando elimino el margen de -30px-izquierda?

2. ¿Cómo debo cambiar mi código para obtener realmente un diseño de 3 columnas, cada columna tiene el mismo ancho? Esto es lo que span4 debería hacer.

Answer 1

La row clase agrega un

1. clearfix
2. margin-left negativo margin-left
3. margin-right negativo margin-right

Bootply : http://www.bootply.com/120858

Con margen negativo al comienzo:

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Sin margen negativo al comienzo:

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Answer 2

Porque ya no necesitas usar fluido de hilera. Toda fila hace es realizar el cleafix y aplicar el margen negativo. Esto es típicamente correcto para un sistema de cuadrícula preciso. Puede usar contenedores o, en lugar de usar "fila", simplemente usa "clearfix" y tendrá exactamente el mismo comportamiento que antes sin margen.

Answer 3

Si está en modo Fluido y usa menos, una mixin es muy útil: .offsetFirstChild (@columns)

(ver mixin.less de Bootstrap)

Answer 4

Una forma de resolver este problema es usar class="container row" lugar de class="row" , esta solución hará que la fila encaje en el contenedor sin desbordamiento horizontal.

Answer 5

Use jQuery:

$(''<div>Test</div>'').addClass(''row'').css("margin-left", 0).css("margin-right", 0).appendTo(''.content'');

Answer 6

pregunta 1 :

todos los span s tienen un margin-left de 30px para crear espacio entre los bloques individuales. este espacio solo debería aparecer entre el span simple y no al principio (o final) de la row . para lograr esto, hay varias posibilidades, por ejemplo:

• crea un margin negativo con el espacio-con en la fila (esto es lo que hace el arranque)
• use el selector :first-child para quitar el margen izquierdo en el primer span en una fila
• [continuará]

Solo puedo suponer que el programa de arranque usa la primera opción porque es más compatible con los navegadores más antiguos (probablemente IE 7 y versiones posteriores).

un pequeño ejemplo: digamos que su span tiene un ancho de 100, un espacio de 10 y hay 3 en una fila.

• su ancho total de fila en este caso debe ser 320 (100 + 10 + 100 + 10 + 100 = 320)
• un solo tramo tiene un ancho de 110 (ancho 100 + 10 magin-izquierda)
  • simplemente agregarlos te daría un ancho de 330 y un feo espacio de 10 al comienzo ( 10 + 100 + 10 + 100 + 10 + 100 = 330)
  • "restar" 10 con uno de los métodos enumerados ( -10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
    • hooray, hemos creado grandes cosas con el poder de las matemáticas

pregunta 2 si usa span4 s, ya tiene 3 columnas del mismo ancho. no necesitas cambiar nada