Yo estaba jugando con Twitter Bootstrap y noté que mi .row era más ancha que la pantalla de longitud.

Aquí es el ejemplo

Cuando bootstrap 3.0 salió yo no la experiencia de este.

El espacio extra en el lado derecho viene de margin-right: -15px;

He sido evidentes en esto durante horas sin hacer ningún progreso en por qué o cómo estoy engañando a mí mismo y la búsqueda no ha sido de gran ayuda.

Estoy seguro de que me estoy perdiendo de lo obvio. Me gustaría entender por qué no es este el espacio más allá de la anchura de la ventana (forzando un scroller) y cómo evitarlo. Pensé que una fila podría coincidir con el 100%

InformationsquelleAutor Ronni Skansing | 2013-10-27

4 Comentarios

  1. 39

    La solución correcta (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) es el uso de la container-fluid clase en los alrededores de la div:

    <div class="container-fluid">
  <div class="row">
    Content
  </div>
</div>
    • Sí el error ya no se puede replicar y desde el .contenedor de fluido ha sido añadido. Esta es ahora la respuesta correcta y así que he cambiado el aceptado contestar a la suya. +1
    • Esto hace no de trabajo si pones un poco de columnas en el interior. bootstrap 3.2.0, Anes de la respuesta, trabajó para mí.
    • Muchas gracias! Me ha tomado bastante tiempo para averiguar esto.
    InformationsquelleAutor Ben
  2. 7

    Me fijo por sólo la eliminación de margin-left & margen derecha de .fila en bootstrap y también por la configuración del ancho de 100%

    • Bienvenido a Desbordamiento de Pila. ¿Cómo respondes mejorar la aceptación de la respuesta?
    • El problema es que la eliminación de la margen izquierda/derecha destruye por completo uno de los pilares arquitectónicos de bootstrap por completo….
    • La respuesta aceptada, no funcionó. Sin embargo, esta parece ser la respuesta real.
    • Simplemente ajuste el ancho al 100% trabajado para mí. bootstrap 3.2.0, @JasonAller aceptado la respuesta, obviamente, no funciona…, pruebe con algunas columnas en su interior..
    • Esto funcionó para mí: .row {max-width: 100%}
    InformationsquelleAutor Anees
  3. 6

    EDITAR >>

    Este fue el aceptado previamente la respuesta. Recupera si cualquiera de los sitios con una versión antigua.

    EDITAR <<

    Es un bug

    Que parece haber sido fijadas para rato. Tal vez una adecuada revisión en 3.1.

    Mejor sugerencia parece ser "overflow-x: hidden en body elemento.

    https://github.com/twbs/bootstrap/issues/10711

    Distinta de la que se añade, aclaró que algunos de los que en este cometer

    Especialmente esta línea «Gente que busca crear totalmente fluido diseños (es decir, su sitio se extiende por todo el ancho de la ventana) se debe ajustar su red de contenido en un elemento de contención con padding: 0 15px; para compensar la margin: 0 -15px; utilizado en .row«

    InformationsquelleAutor Ronni Skansing
  4. 2

    Sus filas deben ser colocados dentro de un div con la clase de contenedor aplicado.

    Por ejemplo

    <div class="container">
    <div class="row">
        Content
    </div>
</div>
    • Hola, gracias. Como yo lo entiendo. El contenedor del propósito es el centro de las cosas. Sin ella, yo habría esperado una fila para ser 100% de ancho? Tengo que hacer un cliente contenedor?
    InformationsquelleAutor Code Monkey

Dejar respuesta

Please enter your comment!
Please enter your name here