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