Bootstrap-Eliminación de relleno o margen cuando el tamaño de la pantalla es más pequeño

El problema aquí es mucho más complejo que eliminar el relleno del contenedor, ya que la estructura de la cuadrícula se basa en este relleno cuando se aplican márgenes negativos para las filas cerradas.

Eliminar el relleno del contenedor en este caso causará un desbordamiento del eje x causado por todas las filas dentro de esta clase de contenedor, esta es una de las cosas más estúpidas de la cuadrícula de Bootstrap.

, Lógicamente, debe ser abordado por

1. Nunca usar la clase .container para nada distintas de las filas
2. Haga un clon de la clase .container que no tenga relleno para usar con html que no sea de cuadrícula
3. Para eliminar el relleno .container en el móvil se puede eliminar manualmente con media queries entonces overflow-x: hidden; que no es muy fiable, pero funciona en la mayoría de los casos.

Si está utilizando LESS el resultado final se verá así

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Cambie la consulta de medios al tamaño que desee.

Pensamientos finales, yo recomendaría encarecidamente el uso de la Foundation Framework Grid como su camino más avanzado

Este hilo fue útil para encontrar la solución en mi caso particular (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Para resolver problemas como este estoy usando CSS - la forma más rápida y sencilla que creo... Solo modifícalo según tus necesidades...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

La forma en que consigo que un elemento vaya al 100% de ancho del dispositivo es usar márgenes negativos izquierdo y derecho en él. El cuerpo tiene un relleno de 24px, por lo que es para lo que puede usar márgenes negativos:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

He tenido este problema se producen en los sitios que utilizan el formato y el código similares y he atormentado mi cerebro sobre lo que faltaba el detalle que hizo que algunos de mis sitios de trabajo, y algunos no.

Para Bootstrap 3: La respuesta para mí no estaba en reescribir css para .contenedor-fluido, .fila o restablecer los márgenes, el patrón consistente que me di cuenta era la longitud de palabras más largas estaban lanzando fuera del diseño y la creación de márgenes.

La solución pasos:

1. Pruebe su página eliminando temporalmente las secciones que contienen contenedores y pruebe su sitio en navegadores pequeños. Esto identificará su contenedor problema.

2. Es posible que tenga un problema de formato div. Si lo haces, arréglalo. Si todo está bien, entonces:

3. Identifique si ha usado palabras largas que no están envolviendo. Si no puede cambiar la palabra(como para líneas de etiqueta o eslóganes, etc.)

Solución 1: Formatear la fuente para tamaño más pequeño en su consulta de medios para una pantalla más pequeña (generalmente encuentro que @media (ancho máximo: 767px) es suficiente).

O:

Solución 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

El CSS de Paulius Marčiukaitis funcionó muy bien para mi tema de Génesis, así es como lo modifiqué aún más para mi requisito:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

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