web-dev-qa-db-fra.com

Twitter Bootstrap: espace blanc à gauche et à droite dans des largeurs d'écran plus petites?

J'ai un balisage semblable à ceci:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <h1>Hello World!</h1>
        </div>
    </div>
</div>

Évidemment, je veux que le .container-fluid s’étende sur toute la largeur de l’écran. Cependant, dans les petites largeurs d'écran, cela ne semble pas être le cas. Il apparaît un espace des deux côtés de l’écran, ce qui réduit le volume d’écran et affecte l’aspect général que j’essaie d’atteindre.

Y a-t-il un moyen de se débarrasser de cet espace? Je veux que .container-fluid occupe toute la largeur de l'écran, quelle que soit sa largeur.

csscss3twitter-bootstrap
12
StackOverflowNewbie

Dans bootstrap-responsive.css, le corps reçoit un rembourrage de 20 pixels à gauche et à droite pour les petites fenêtres. Si vous ne le souhaitez pas du tout, supprimez-le de votre version. C'est à la ligne 803 et ressemble à ceci:

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

Si vous souhaitez simplement supprimer l'espace blanc d'un certain élément ou d'une certaine classe, ajoutez-lui ces marges:

 margin-left:-20px;
 margin-right:-20px;
17
Alexander Mistakidis

J'ai eu le même problème en utilisant Bootstrap 3.0 . Résolu pour les petits écrans en mettant:

.container {
     padding-right: 0; /*15px in bootstrap.css*/
     padding-left: 0;  /*idem*/
     margin-right: auto;
     margin-left: auto;
}

dans ma propre feuille de style. 

8
webhazard

Simplement

.container-fluid {
     padding:0;
}

Si la barre de défilement apparaît en raison de la bordure, il doit y avoir 

box-sizing: border-box;

dans la classe appropriée pour faire disparaître la barre de défilement

3
Shahid Iqbal

Les deux marges blanches sont créées par les classes content et body-content. Si vous utilisez ces classes dans une div externe, essayez de les supprimer pour supprimer les marges vides de chaque côté de la page. 

0
swat