web-dev-qa-db-fra.com

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

EDITED: Peut-être que je devrais demander quel sélecteur configure le remplissage 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 l'affecter. 

Original Je souhaite supprimer tout remplissage ou marge défini par défaut pour la réactivité sur des écrans de périphérique plus petits.

J'ai un background color surclassé sur le sélecteur container-fluid et pour un écran plus grand, le rendu est parfait à 100% sur toute la largeur mais l'écran est réduit à une taille plus petite, .__ par défaut, Bootstrap semble ajouter une marge. ou le remplissage sur container-fluid ou 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, à quelle requête ou sélecteur de média dois-je écraser pour supprimer ce remplissage sur des écrans plus petits?

csstwitter-bootstrapresponsive-designmedia-queries
67
Seong Lee

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

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

Toutefois, vous souhaiterez peut-être supprimer le remplissage/la marge pour toutes les tailles d'écran plus petites. Par défaut, Bootstrap ajuste les marges/marges 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 responsive spacing qui vous permettent de définir des marges intérieures/intérieures pour différentes largeurs d'écran (points d'arrêt): https://stackoverflow.com/a/43208888/171456

84
Zim

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 fermées.

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

Logiquement, il devrait être abordé par 

  1. Ne jamais utiliser la classe .container pour autre chose que des lignes
  2. Créez un clone de la classe .container qui n'a pas de remplissage à utiliser avec du code HTML non grille
  3. Pour supprimer le remplissage .container sur le mobile, vous pouvez le supprimer manuellement à l'aide de requêtes multimédia, puis overflow-x: hidden;, ce 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 multimédia en fonction de la taille que vous souhaitez cibler.

Dernières réflexions, je vous recommande vivement d’utiliser le Foundation Framework Grid comme moyen plus avancé

17
Zyad Sherif

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;
  }
}
8
Mike Dorsey

Pour résoudre des problèmes comme celui-ci, j'utilise CSS - le moyen le plus simple et le plus rapide, il suffit de le modifier en fonction de 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;}
}
7
Paulius Marčiukaitis

Pour obtenir un élément dont la largeur correspond à 100%, utilisez des marges négatives à gauche et à droite. Le corps a un rembourrage de 24px, c'est pourquoi vous pouvez utiliser des marges négatives pour:

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

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

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

}

1
Swagatam Majumdar

Ce problème est survenu sur des sites utilisant un formatage et un code similaires et je me suis rendu compte des détails manquants qui ont fait fonctionner certains de mes sites et d'autres pas.

Pour Bootstrap 3: Pour moi, la solution n’était pas de réécrire CSS pour .container-fluid, .row ou de réinitialiser les marges, le motif cohérent que j’ai réalisé est que la longueur de mots plus longs jette le dessin et crée 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èmes.

  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 lignes de balises ou les slogans, etc.)

Solution 1: formatez la police dans un format plus petit dans votre requête multimédia pour un écran plus petit (je trouve généralement que le format @media (largeur maximale: 767 pixels) est suffisant).

OU:

Solution 2: 

@media (max-width: 767px){

h1, h2, h3 {Word-wrap: break-Word;}
}
1
Kim McCann
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
0
Indrajeet Yadav

Un autre fichier CSS qui peut créer un problème de marge est que vous avez direction:someValue dans votre fichier CSS. 

Par exemple:

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

Voici ce que je fais pour Bootstrap 3/4

Utilisez un récipient contenant le liquide plutôt que le récipient.

Ajoutez ceci à mon CSS

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

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

0
Ryan NZ