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

La façon dont je fais en sorte qu'un élément s'étende sur toute la largeur du dispositif est d'utiliser des marges négatives à gauche et à droite. Le corps a un padding 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;
}

Answer 2

Pour Bootstrp 5, utilisez .g-0 .g-md-1, ce qui mettra les gouttières à zéro pour les écrans de taille inférieure à 576px.

<div class="container g-0 g-md-1"> ... </div>

Answer 3

Dans Bootstrap 4, la marge de 15px dont dispose le conteneur initial se répercute sur toutes les lignes et colonnes. Donc, quelque chose comme ceci 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;
    }
}

Answer 4

J'ai rencontré ce problème sur des sites qui utilisaient un formatage et un code similaires et je me suis creusé la tête pour savoir quel était le détail manquant qui faisait que certains de mes sites fonctionnaient et d'autres pas.

Pour Bootstrap 3 : La réponse pour moi n'était pas dans la réécriture de css pour .container-fluid, .row ou la réinitialisation des marges, le modèle cohérent que j'ai réalisé était le suivant la longueur des mots plus longs perturbait la conception et créait des marges .

Les étapes de la solution :

1. Testez votre page en supprimant temporairement les sections qui contiennent des conteneurs et testez votre site sur de petits navigateurs. Cela permettra d'identifier le conteneur qui pose problème.

2. Vous avez peut-être un problème de formatage de div. Si c'est le cas, 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 lignes d'accroche ou les slogans, etc.)

Solution 1 : Formatez la police à une taille plus petite dans votre requête mé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;}
}

Answer 5

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

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

}