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 requête @media spécifique aux "téléphones" est

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

Mais il est possible que vous souhaitiez supprimer le remplissage/la marge pour les écrans de petite taille. Par défaut, Bootstrap ajuste les marges et l'espacement du corps, du conteneur et des 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 le nouveau système réactif outils d'espacement qui vous permettent de définir des marges pour différentes largeurs d'écran (points de rupture) : https://stackoverflow.com/a/43208888/171456

Answer 2

Le problème est ici beaucoup plus complexe que la suppression du remplissage du conteneur, car la structure de la grille s'appuie sur ce remplissage lorsqu'elle applique des marges négatives aux rangées incluses.

La suppression du remplissage du conteneur dans ce cas entraînera un débordement de 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 de la grille Bootstrap.

Logiquement, elle devrait être abordée par

1. Ne jamais utiliser le .container pour tout ce qui n'est pas des rangs
2. Faites un clone de la .container qui n'a pas de remplissage et qui peut être utilisée avec des fichiers html non grillagés
3. Pour retirer le .container padding sur mobile que vous pouvez manuellement supprimer avec des queries de médias alors overflow-x: hidden; qui n'est pas très fiable mais fonctionne dans la plupart des cas.

Si vous utilisez LESS le résultat final ressemblera à ceci

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

Modifiez la requête média en fonction de la taille que vous souhaitez cibler.

Pour conclure, je recommande vivement d'utiliser le Foundation Framework Grille car elle est beaucoup plus avancée

Answer 3

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

px-lg-1

mb-lg-5

En ajoutant lg, la classe ne sera appliquée que sur les grands écrans.

Answer 4

Ce fil de discussion 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;
  }
}

Answer 5

Pour résoudre ce genre de problème, j'utilise CSS - la méthode la plus rapide et la plus simple, je pense... Il suffit de le modifier 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;}
}