Bootstrap - Suppression du rembourrage ou de la marge lorsque la taille de l'écran est plus petite

EDITED: Peut - être devrais-je demander quel sélecteur configure le rembourrage latéral lorsque l'écran est réduit à une largeur inférieure à 480px? J'ai parcouru bootstrap-responsiveness.css pendant un certain temps pour localiser cela, mais rien ne semble affecter cela.

Original Je souhaite essentiellement supprimer tout remplissage par défaut ou jeu de marges pour la réactivité sur les écrans plus petits des appareils.

J'ai une background colorsurchargée container-fluidsélection et pour un écran plus grand , ils rendent parfaitement 100% sur toute la largeur mais l'écran est réduite à des tailles plus petites, par défaut, Bootstrap semble ajouter une marge ou rembourrage sur container-fluidou container.

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

Si j'utilise un CSS personnalisé pour écraser le style par défaut de Bootstrap, sur quelle requête multimédia ou sélecteur dois-je écraser pour supprimer ce remplissage sur des écrans plus petits?

La requête @media spécifiquement pour "téléphones" est ..

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

Cependant, vous souhaiterez peut-être supprimer le remplissage / la marge pour les tailles d'écran plus petites. Par défaut, Bootstrap ajuste les marges / remplissage au corps, au conteneur et aux barres de navigation à 978px.

Voici quelques requêtes qui ont fonctionné (dans la plupart des cas) pour moi:

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

Démo

Mise à jour pour Bootstrap 4

Utilisez les nouveaux utilitaires d'espacement réactifs qui vous permettent de définir le remplissage / les marges pour différentes largeurs d'écran (points d'arrêt): https://stackoverflow.com/a/43208888/171456

Le problème ici est beaucoup plus complexe que la suppression du remplissage du conteneur, car la structure de la grille repose sur ce remplissage lors de l'application de marges négatives pour les lignes incluses.

La suppression du remplissage du conteneur dans ce cas provoquera un débordement sur l'axe des x causé par toutes les lignes à l'intérieur de cette classe de conteneur, c'est l'une des choses les plus stupides à propos de la grille Bootstrap.

Logiquement, il devrait être approché par

1. Ne jamais utiliser la .containerclasse pour autre chose que des lignes
2. Faire un clone de la .containerclasse qui n'a pas de remplissage pour une utilisation avec du HTML sans grille
3. Pour supprimer le .containerrembourrage sur mobile, vous pouvez le supprimer manuellement avec des requêtes multimédias, ce overflow-x: hidden;qui n'est pas très fiable mais fonctionne dans la plupart des cas.

Si vous utilisez LESSle résultat final ressemblera à ceci

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

Modifiez la requête multimédia selon la taille que vous souhaitez cibler.

Dernières réflexions, je recommanderais vivement d'utiliser la Foundation Frameworkgrille comme étant plus avancée

Ce fil a été utile pour trouver la solution dans mon cas particulier (bootstrap 3)

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

Pour résoudre des problèmes comme celui-ci, j'utilise CSS - le moyen le plus rapide et le plus simple je pense ... Modifiez-le simplement selon vos besoins ...

@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 façon dont j'obtiens un élément pour atteindre 100% de la largeur de l'appareil consiste à utiliser des marges négatives à gauche et à droite. Le corps a un rembourrage de 24px, c'est donc pour cela que vous pouvez utiliser des marges négatives:

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

Dans Bootstrap 4, la marge de 15 pixels du conteneur initial se décompose en cascade jusqu'à toutes les lignes et colonnes. Donc, quelque chose comme ça fonctionne pour moi ...

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

J'ai eu ce problème sur des sites qui utilisaient un formatage et un code similaires et je me suis creusé la tête sur les détails manquants qui faisaient fonctionner certains de mes sites, et d'autres non.

Pour Bootstrap 3: La réponse pour moi n'était pas de réécrire css pour .container-fluid, .row ou de réinitialiser les marges, le modèle cohérent que j'ai réalisé était la longueur des mots plus longs qui rejetaient le design et créaient des marges .

Les étapes de la solution:

1. Testez votre page en supprimant temporairement les sections contenant des conteneurs et testez votre site sur de petits navigateurs. Cela identifiera votre conteneur de problème.

2. Vous pouvez avoir un problème de formatage div. Si vous le faites, corrigez-le. Si tout va bien, alors:

3. Identifiez si vous avez utilisé des mots longs qui ne sont pas enveloppants. Si vous ne pouvez pas changer le mot (comme pour les slogans ou les slogans, etc.)

Solution 1: formatez la police à une taille plus petite dans votre requête multimédia pour un écran plus petit (je trouve généralement que @media (max-width: 767px) est suffisant).

OU:

Solution 2:

@media (max-width: 767px){

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

Le CSS de Paulius Marčiukaitis a bien fonctionné pour mon thème Genesis, voici comment je l'ai modifié davantage pour mes besoins:

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

Voici ce que je fais pour Bootstrap 3/4

Utilisez du liquide contenant du liquide au lieu du contenant.

Ajouter ceci à mon CSS

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

Cela supprime les marges inférieures à l'écran de largeur 1400 px

Un autre css qui peut poser un problème de marge est que vous avez direction:someValuedans votre css, alors supprimez-le simplement en le définissant sur initial.

Par exemple:

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

La solution simple est d'écrire quelque chose comme ça,

px-lg-1

mb-lg-5

En ajoutant lg, la classe sera appliquée uniquement sur les grands écrans