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

responsive css

Question

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

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

Tengo un background color anulado en container-fluid selector de container-fluid y para una pantalla más grande rinden perfectamente al 100% en el ancho pero la pantalla se reduce a tamaños más pequeños, de forma predeterminada, Bootstrap parece agregar un margen o relleno en el container-fluid o container .

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

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

Answer 1

El CSS de Paulius Marčiukaitis funcionó muy bien para mi tema Génesis, así es cómo modifiqué mi requisito:

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

}

Answer 2

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

La eliminación del 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 sobre Bootstrap Grid.

Lógicamente debe ser abordado por

1. Nunca usar la clase .container para nada más que filas
2. Haga una clonación de la clase .container que no tenga relleno para usar con html que no sea de cuadrícula
3. Para eliminar el relleno de .container en el móvil, puede eliminarlo manualmente con consultas de medios, luego overflow-x: hidden; que no es muy confiable 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 orientar.

Pensamientos finales: recomendaría mucho utilizar el Foundation Framework Grid de una manera más avanzada

Answer 3

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

Answer 4

He tenido este problema en sitios que usaron un formato y código similar, y me he preocupado por el detalle que faltaba que hacía 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 los márgenes, el patrón consistente que me di cuenta era la longitud de las palabras más largas que arrojaban el diseño y creaban 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 de problemas.

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

3. Identifica si has usado palabras largas que no están envolviendo. Si no puede cambiar la palabra (como líneas de etiqueta o lemas, 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 (max-width: 767px) es suficiente).

O:

Solución 2:

@media (max-width: 767px){

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

Answer 5

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

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

Sin embargo, 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, contenedor y barras de navegación a 978 px.

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

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

Demo

Actualización para Bootstrap 4

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

Answer 6

La forma en que obtengo un elemento para ir al 100% del ancho del dispositivo es usar márgenes izquierdos y derechos negativos en él. El cuerpo tiene un relleno de 24 píxeles, por lo que puedes usar márgenes negativos para:

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

Answer 7

Para resolver problemas como este, estoy usando CSS, la forma más rápida y sencilla, creo ... Solo modifícala 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;}
}

Answer 8

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