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


89

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?


1
En realidad, el acolchado se agrega al cuerpo.
Mister Smith

Respuestas:


116

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


4
¡Si! Finalmente localizó lo que marca este comportamiento. Detectaste mi problema en el punto. Muchas gracias.
Seong Lee

Gracias por el consejo útil. Funciona bien para mi.
Sedat Kumcu

esto es muy útil y funciona para bootstrap .. gracias
Faisal

¿Cómo es el ancho máximo para la barra de navegación abierta?
Faisal

Tal vez tuve un problema similar, pero estaba relacionado con el relleno entre el cuerpo y la clase .container real. El contenedor era realmente pequeño para la pantalla del Iphone 5, las utilidades de espaciado no me ayudaron en absoluto, en cambio, edito el estilo del cuerpo directamente, cambiando el relleno de 50px a 15px, ahora tenemos mucho más espacio en la pantalla.
Paulo Henrique

20

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


Esto todavía funciona para Bootstrap 4, si por alguna razón no desea usarlo px-sm-0en columnas.
Sebastian Thomas

8

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;
  }
}

7

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;}
}

1
lo siento ... no sobrescribe el relleno para este asunto simplemente agregando un selector ...
Seong Lee

1
@tassoevan Me temo que ya sabía si 000px era lo mismo que 0 y cambiar 000px a 0 no resolverá el problema, además, no sé si es una buena idea establecer un ancho en un valor de píxel incluso en 0. .Es algo que ver con el margen o el relleno, supongo.
Seong Lee

1
"000" fue solo un ejemplo. Debes escribir #your_id {margin: 5px; padding: 0px;} en lugar de #your_id {width: 000px; height: 000px;}
WaPaRtY

2
¡Trate de escribir siempre el código adecuado! ¡Los principiantes pueden encontrarlo confuso! :)
Mackelito

3

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;
}

2

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;
    }
}

1
respuesta subestimada, esto me ayudó a deshacerme de una barra de desplazamiento horizontal en el móvil
William Randokun

1

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;}
}

1

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;

}


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

De la opinión Que: ¿Podría elaborar.
Rahul

0

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


0

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;
    }
}

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.