Bootstrap - Retrait de remplissage ou de marge lorsque la taille de l'écran est plus petit

Ici, le problème est beaucoup plus complexe que de supprimer le remplissage de conteneurs depuis la structure de la grille s'appuie sur ce remplissage lors de l'application des marges négatives pour le joint de lignes.

Enlever le remplissage de conteneurs dans ce cas entraîne un axe x débordement causé par toutes les lignes à l'intérieur de ce conteneur de classe, c'est l'une des choses les plus stupides sur le Bootstrap Grille.

Logiquement, il devrait être abordée par

1. Jamais à l'aide de la .container classe pour autre chose que des lignes
2. Faire un clone de la .container classe qui n'a pas de rembourrage pour une utilisation avec des non-grille html
3. Pour l'enlèvement de la .container rembourrage sur mobile, vous pouvez le supprimer manuellement avec les media queries puis 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 devrait ressembler à ceci

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

Modifier la requête de support à la taille que vous souhaitez cibler.

Réflexions, je vous recommande fortement de l'aide de l' de la Fondation de Cadre Grille de manière plus avancée

Pour résoudre ce type de problèmes, je suis en utilisant le CSS - rapide & façon la plus simple je pense... Juste 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;}
}

J'ai eu ce problème se produit sur des sites qui a utilisé la même mise en forme et le code et j'ai torturé mon cerveau sur ce qui a été le manque de détails qui fait une partie de mes sites, et d'autres pas.

Pour Bootstrap 3: La réponse pour moi n'était pas dans la réécriture des règles css .conteneur de fluide .ligne ou la remise à zéro des marges, de la cohérence d'un schéma que j'ai réalisé était le longueur des mots plus longs ont été jetant la conception et la création de marges de.

La solution suit:

1. Tester votre page temporairement par la suppression de sections qui contiennent des conteneurs et de tester votre site sur les petits navigateurs. Cela permettra d'identifier votre problème conteneur.

2. Vous pouvez avoir un div formatage problème. Si vous le faites, le réparer. Si tout va bien alors:

3. Identifier si vous avez utilisé des mots qui ne sont pas d'emballage. Si vous ne pouvez pas modifier le mot (comme pour la balise de lignes ou de slogans, etc.)

Solution 1: Format de la police de caractères plus petite taille dans votre requête de média pour le petit écran (j'ai l'habitude de trouver des @media (max-width: 767px) d'être suffisant).

OU:

Solution 2:

@media (max-width: 767px){

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

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

Un autre css qui peuvent faire de la marge problème, c'est que vous avez direction:someValue dans votre css, il suffit donc de le supprimer par la valeur initiale.

Par exemple:

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