Bootstrap: eliminar el relleno o el margen cuando el tamaño de la pantalla es menor

EDITADO: ¿ Quizás debería preguntar qué selector configura el relleno lateral cuando la pantalla se reduce a menos de 480px de ancho? He estado navegando por bootstrap-responsiveness.css durante un tiempo para localizar esto, pero nada parece afectarlo.

Original Básicamente quiero eliminar cualquier margen o relleno predeterminado para la capacidad de respuesta en pantallas de dispositivos más pequeños.

Tengo un selector background coloranulado container-fluidy para una pantalla más grande se renderizan perfectamente al 100% en todo el ancho, pero la pantalla se reduce a tamaños más pequeños, de manera predeterminada, Bootstrap parece agregar un margen o relleno en container-fluido container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

Si utilizo CSS personalizado para sobrescribir el estilo predeterminado de Bootstrap, ¿qué consulta de medios o selector debo sobrescribir para eliminar este relleno en pantallas más pequeñas?

La consulta @media específicamente para 'teléfonos' es ..

@media (max-width: 480px) { ... }

Pero, es posible que desee eliminar el relleno / margen para cualquier tamaño de pantalla más pequeño. De forma predeterminada, Bootstrap ajusta los márgenes / relleno al cuerpo, el contenedor y las barras de navegación a 978px.

Aquí hay algunas consultas que me han funcionado (en la mayoría de los casos):

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Manifestación

Actualización para Bootstrap 4

Utilice las nuevas utilidades de espaciado receptivo que le permiten establecer el relleno / márgenes para diferentes anchos de pantalla (puntos de interrupción): https://stackoverflow.com/a/43208888/171456

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

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 Bootstrap Grid.

Lógicamente debería ser abordado por

1. Nunca usar la .containerclase para nada más que filas
2. Haga un clon de la .containerclase que no tenga relleno para usar con html sin cuadrícula
3. Para eliminar el .containerrelleno en el móvil, puede eliminarlo manualmente con consultas de medios, lo overflow-x: hidden;que no es muy confiable pero funciona en la mayoría de los casos.

Si está utilizando LESSel 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.

Reflexiones finales, recomendaría encarecidamente usar Foundation FrameworkGrid ya que es 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, creo que es la forma más rápida y sencilla ... Simplemente modifíquelo según sus 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% del ancho del dispositivo es usar márgenes negativos izquierdo y derecho en él. El cuerpo tiene un relleno de 24px, por lo que puede usar márgenes negativos para:

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

En Bootstrap 4, el margen de 15px que tiene el contenedor inicial, desciende en cascada a todas las filas y columnas. Entonces, algo como esto funciona para mí ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

He tenido este problema en sitios que usaban formato y código similar y me he devanado la cabeza sobre cuál era el detalle faltante que hizo que algunos de mis sitios funcionaran y otros no.

Para Bootstrap 3: La respuesta para mí no fue reescribir css para .container-fluid, .row o restablecer márgenes, el patrón consistente que me di cuenta era que la longitud de las palabras más largas estaba desechando el diseño y creando márgenes .

Los pasos de la solución:

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

2. Es posible que tenga un problema de formato de div. Si es así, arréglalo. Si todo va bien, entonces:

3. Identifique si ha utilizado palabras largas que no se envuelven. Si no puede cambiar la palabra (por ejemplo, para eslóganes o eslóganes, etc.)

Solución 1: Formatee la fuente a un 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;
}

Esto es lo que hago para Bootstrap 3/4

Use contenedor de líquido en lugar de contenedor.

Agregar esto a mi CSS

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Esto elimina los márgenes por debajo de la pantalla de 1400px de ancho

Otro CSS que puede generar el problema del margen es el que tiene direction:someValueen su CSS, así que simplemente elimínelo configurándolo en initial.

Por ejemplo:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

La solución fácil es escribir algo así,

px-lg-1

mb-lg-5

Al agregar lg, la clase se aplicará solo en pantallas grandes