Cómo hacer el diseño fluido de bootstrap 3 sin barra de desplazamiento horizontal

aquí hay un enlace de muestra: http://bootply.com/76369

esto es html yo uso.

.col-md-6
.col-md-6

bootstrap 3 no tiene fluido contenedor y líquido de fila.

No puedo envolverlo con la clase .container porque se convertirá en diseño fijo.

¿Cómo hacer un diseño fluido (ancho de página completo) ? ( sin barra de desplazamiento horizontal )

con estas marcas. cuando ve en el resultado, la barra de desplazamiento X está visible, por lo que puede desplazarse hacia la izquierda y hacia la derecha para evitarlo.


editado: 2015-12-09
Ya obtuve respuesta y Bootstrap ya lanzó la solución desde 3.1.0

Esto fue introducido en v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit # 62736046 añadió “variación de fluido contenedor para contenedores y diseños de ancho completo”.

También lo tengo y mientras espero que lo arreglen, agregué esta vergüenza css:

body { overflow-x: hidden;}

es una alternativa horrible, pero funciona. Estaré encantado de eliminarlo cuando hayan resuelto el problema.

Otra alternativa, como se señala en el problema , es anular .row :

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

Este es un problema conocido en BS 3 – https://github.com/twbs/bootstrap/issues/9862?source=cc

He probado en Bootply usando la última comstackción, así que sigue viendo GitHub para las últimas actualizaciones / arreglos.

En Bootstrap 3, .row debe usarse dentro de un .container o .container-fluid para contrarrestar los márgenes negativos en la fila. Esto eliminará la barra de desplazamiento horizontal.

De los documentos …

“Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y un relleno correctos”.

Bootstrap 4

La relación container > row > col funciona de la misma manera que 3.x …

“Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios cuando utilizamos nuestro sistema de grillas predeterminado”

Si lo entiendo correctamente, al agregar esto después de cualquier consulta de medios, se anulan las restricciones de ancho en las cuadrículas predeterminadas. Funciona para mí en bootstrap 3 donde necesitaba un diseño de ancho del 100%

 .container { max-width: 100%; /* This will remove the outer padding, and push content edge to edge */ padding-right: 0; padding-left: 0; } 

Luego puede poner sus elementos de fila y grilla dentro del contenedor.

Actualización a partir de 2014, desde documentos de Bootstrap:

Cuadrículas y diseños de ancho completo Las personas que buscan crear diseños totalmente fluidos (lo que significa que su sitio se extiende por todo el ancho de la ventana gráfica) deben envolver su contenido de cuadrícula en un elemento contenedor con relleno: 0 15px; para compensar el margen: 0 -15px; utilizado en .rows.

Solo mis 2 centavos aquí. En general, esto funcionará para usted, como lo hizo para mí.

 body > .row { margin-left: 0px; margin-right: 0px; } 

Me encontré con el mismo problema (queriendo un diseño fluido) pero quería mantener las opciones de respuesta con la reorganización de columnas y demás para pantallas más pequeñas y terminé con un pequeño cambio en variables.less:

 // Large screen / wide desktop (last row of file) @container-lg-desktop: 100%; //((1140px + @grid-gutter-width)); 

Este valor se usa una vez en grid.less y establece

 @media (min-width: @screen-lg-desktop) { .container { max-width: @container-lg-desktop; } .... } 

El resultado es que más de 1200 px la red es fluida (sin barras de desplazamiento horizontales). Debajo, se aplican las reglas normales de respuesta. Por supuesto, también puede configurar esto para otras consultas de medios con la misma facilidad.

Si no desea editar y comstackr .less usted mismo, puede anular el maxwidth en su propia hoja de estilo similar a la siguiente:

 @media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */ body .container { max-width: 100%; } } 

Todo esto supone que utiliza la syntax de la red Bootstrap normal, incluido el contenedor, como a continuación:

 
.col-md-6
.col-md-6

¡Espero que esto ayude!

En la última versión de Twitter Bootstrap, el diseño es fluido por defecto, por lo tanto, no necesita clases adicionales para declarar su diseño como fluido.

Puedes referirte más a –

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

Esto funcionó para mí. Probado en FF, Chrome, IE11, IE10

 .row { width:99.99%; } 

La barra de desplazamiento horizontal puede aparecer si el div container-fluid se coloca directamente dentro del body .

La forma correcta de usar una estructura de container-fluid es:

  

Por lo tanto, intente envolver sus DIVs de container-fluid contenedor dentro de un div externo, como

o

o

o

u otro

, ¡y listo! sin barra de desplazamiento horizontal

En Bootstrap 3, colocar columnas inmediatamente debajo del cuerpo debería darle una distribución fluida sin barra de desplazamiento horizontal

  
.col-md-6
.col-md-6

La versión de Bootstrap 3.0 es complicada, ya que agregará solución para este problema y probablemente devuelva fluido contenedor en Bootstrap 3.1. Pero hasta entonces aquí hay una solución que estoy usando:

En primer lugar, necesitaría un contenedor personalizado y establecerlo en un ancho del 100%, y luego deberá corregir la disposición del margen de fila, y la barra de navegación también si lo tiene:

 /* Custom container */ .container-full { margin: 0 auto; width: 100%; } /*fix row -15px margin*/ .container-fluid { padding: 0 15px; } /*fix navbar margin*/ .navbar{ margin: 0 -15px; } /*fix navbar-right margin*/ .navbar-nav.navbar-right:last-child { margin-right: 0px; } 

Puede astackr las clases container-full y container-fluid en root div, y puede usar container-fluid más adelante.

Espero que ayude, si necesitas más información, házmelo saber.

Encontré esta solución

 .row { margin-left: 0; margin-right: 0; } [class^="col-"] > [class^="col-"]:first-child, [class^="col-"] > [class*=" col-"]:first-child [class*=" col-"] > [class^="col-"]:first-child, [class*=" col-"]> [class*=" col-"]:first-child, .row > [class^="col-"]:first-child, .row > [class*=" col-"]:first-child{ padding-left: 0px; } [class^="col-"] > [class^="col-"]:last-child, [class^="col-"] > [class*=" col-"]:last-child [class*=" col-"] > [class^="col-"]:last-child, [class*=" col-"]> [class*=" col-"]:last-child, .row > [class^="col-"]:last-child, .row > [class*=" col-"]:last-child{ padding-right: 0px; } 

Esto es lo que funcionó para mí. Agregué un estilo en línea para eliminar el pequeño margen de la derecha. Realmente no me gusta hacer un estilo en línea, pero este atributo de estilo solitario en mi html me permite recordar fácilmente el trabajo de hackeo empalmado en mi código, que de otro modo estaría bien separado. También elimina la preocupación de la carga de estilos externos antes o después de la hoja de estilo predeterminada de arranque.

 

Aplicar al cuerpo parece deshacerse de la barra de desplazamiento horizontal

 overflow-x: hidden; 

Si todavía es real para alguien, mi solución fue la siguiente:

 .container{ overflow: hidden; overflow-y: auto; } 

Ya es fluido por defecto. Si desea ser fluido para menos ancho en lugar de col-md-6 use col-sm-6 o col-xs-6 .

Puede solucionar este problema sin molestar al bootstrap css y esperar una solución en la próxima versión, de modo que simplemente puede ajustar su fila definiendo su propia clase .container-fluid con relleno.

 //Add this class to your global css file  //Wrap your rows in within this .container-fluid 
content
content
content

Puedes agregar un relleno de 10px a los lados de tu elemento corporal si todo lo que son hijos son filas

 body { padding: 0 10px; } 

si su marcado HTML se ve así:

  

Las filas tienen un margen negativo de 10 px. Eso es lo que está causando el desbordamiento. Si agrega 10px relleno al cuerpo, se cancelarán mutuamente.

Lo único que me ayudó fue establecer el margin:0px en la parte superior

en mi html DOM.

De nuevo, esta no era la forma más atractiva de resolver el problema, pero como está solo en un lugar, lo puse en línea.

Como fyi, el fluido de contenedor y las soluciones de arranque aparentes solo introdujeron un aumento del espacio en blanco en cualquier lado de la página visible … 🙁 Aunque encontré mi solución leyendo el tema de github, que vale la pena leer.

Resumiendo los comentarios más relevantes en una respuesta:

  • este es un error conocido
  • hay soluciones pero es posible que no las necesite (siga leyendo)
  • sucede cuando los elementos se colocan directamente dentro del cuerpo, en lugar de dentro de un div contenedor-fluido u otro que contenga div. Colocarlos directamente en el cuerpo es exactamente lo que hacen la mayoría de las personas cuando prueban cosas localmente. Una vez que coloque su código en la página completa (por lo tanto, dentro de un contenedor de fluido u otro contenedor div) no se enfrentará a este problema (no es necesario cambiar nada).