imagen - personalizar scroll css

el uso de fluido contenedor dentro de bootstrap causa una barra de desplazamiento horizontal

Question

Aquí hay un ejemplo simple:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Demostración en Fiddle

Cuando veo el resultado en el navegador, obtengo una barra de desplazamiento horizontal.

¿Por qué está pasando esto?

¿Qué estoy haciendo mal?

Answer 1

Asegúrese de encapsular sus clases de fila con contenedores.

<div class="container">
    <div class="row">
        text
    </div>
</div>

El contenedor compensa los -15 márgenes en filas con +15 .

Answer 2

Con Bootstrap 3.3.5, estaba obteniendo una barra de desplazamiento horizontal en ciertos anchos cerca del cambio del tamaño de pantalla medio (md) a pequeño (sm). Agregando un div.row entre mi div.container-fluid y div.container arregló para mí.

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

Agregar margin:0; a tus filas se romperán algunos elementos de estilo.

Answer 3

En mi caso, cambiando @grid-gutter-width a número impar causó esto, porque;

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

Entonces, si eliges un gutter-width extraño, terminarás teniendo almohadillas irregulares y verás una barra de desplazamiento horizontal.

Answer 4

En mi caso, esta solución funcionó bien:

.row {
  margin-left: 0;
  margin-right: 0;
}

Answer 5

Establezca el ancho máximo en la clase contenedor en lugar de ancho. Eliminará la barra horizontal.

.container-fluid { 
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 
}

Answer 6

Puede ensuciar la fila pirateando agregando nueva clase a la fila de ancho completo y crear sobreescribir el archivo css:

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }

<div class="row noLRMar">
  
 </div>

Answer 7

También me enfrenté a este problema. No sé la causa del problema. Puede ser un error de Twitter Bootstrap . Ahora, tengo que agregar manualmente la etiqueta overflow-x:hidden to my body :

body { 
   overflow-x: hidden;
}

Jsfiddle

Answer 8

container-fluid se sacó originalmente de Bootstrap 3.0, pero se volvió a agregar en 3.1.1

Para solucionar esto, puede:

1. Use la versión más nueva de la hoja de estilo de Bootstrap

   Demostración con una nueva hoja de estilo en Fiddle

2. O agregue en la clase usted mismo

   .row agrega un margen de .row a la izquierda y a la derecha. Como .container-fluid llena el 100% del ancho de la pantalla, el margen de margen adicional causa problemas de desbordamiento.

   Para solucionar esto, necesita agregar relleno a .container-fluid clase .container-fluid

   .container-fluid {
       padding-right: 15px;
       padding-left: 15px;
       margin-right: auto;
       margin-left: auto;
   }

   Demostración con clase de contenedor personalizado en Fiddle

Answer 9

.row{
margin: 0px;
}

solución rápida y fácil esto es todo lo que necesita