html - para - Cómo hacer el diseño fluido de bootstrap 3 sin barra de desplazamiento horizontal
no aparece barra de desplazamiento html (21)
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.
aquí hay un enlace de muestra: http://bootply.com/76369
esto es html yo uso.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
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
Aplicar al cuerpo parece deshacerse de la barra de desplazamiento horizontal
overflow-x: hidden;
En Bootstrap 3, colocar columnas inmediatamente debajo del cuerpo debería darle una distribución fluida sin barra de desplazamiento horizontal
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
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/
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.
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
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".
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:
<body>
<section>
<div class="container-fluid">
<div class="row">
<!-- content goes here -->
</div>
</div>
</section>
</body>
Por lo tanto, intente envolver sus DIVs de container-fluid contenedor dentro de un div externo, como <div id="wrap"> o <section> o <article> o <aside> u otro <div> , ¡y listo! sin barra de desplazamiento horizontal
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 apilar 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.
Lo único que me ayudó fue establecer el margin:0px en la parte superior <div class="row"> 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.
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 compilar .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 sintaxis de la red Bootstrap normal, incluido el contenedor, como a continuación:
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
¡Espero que esto ayude!
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
<style>
.container-fluid {
padding: 0 15px;
}
</style>
//Wrap your rows in within this .container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-md-3">content</div>
<div class="col-md-9">content</div>
<div class="col-md-3">content</div>
</div>
</div>
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í:
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
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.
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).
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.
Si todavía es real para alguien, mi solución fue la siguiente:
.container{
overflow: hidden;
overflow-y: auto;
}
Solo mis 2 centavos aquí. En general, esto funcionará para usted, como lo hizo para mí.
body > .row {
margin-left: 0px;
margin-right: 0px;
}
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 issue , es anular .row :
.row {
margin-left: 0px;
margin-right: 0px;
}
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 .
Este es un problema conocido en BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc
He probado en Bootply usando la última compilació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"