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

Question

ÉDITION : Je devrais peut-être demander quel sélecteur met en place le rembourrage latéral lorsque l'écran est réduit à moins de 480px de largeur ? J'ai parcouru bootstrap-responsiveness.css pendant un certain temps pour le localiser, mais rien ne semble l'affecter.

Original Je veux essentiellement supprimer tout padding ou marge par défaut défini pour la réactivité sur les écrans de périphériques plus petits.

J'ai un background color Remplacé par container-fluid et pour les grands écrans, le rendu est parfait à 100% sur toute la largeur, mais l'écran est réduit pour les petites tailles, par défaut, Bootstrap semble ajouter une marge ou un padding sur les éléments suivants container-fluid ou container .

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

Si j'utilise un fichier css personnalisé pour écraser le style par défaut de Bootstrap, quelle requête média ou quel sélecteur dois-je écraser pour supprimer ce remplissage sur les petits écrans ?

Answer 1

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

Answer 2

Voici ce que je fais pour Bootstrap 3/4

Utilisez conteneur-fluide au lieu de conteneur.

Ajouter ceci à mon CSS

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

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

Answer 3

Un autre css qui peut causer le problème de la marge est que vous avez direction:someValue dans votre css, il suffit donc de le supprimer en le mettant à l'état initial.

Par exemple :

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