bootstrap container-fluid - élimine les marges dans le bon sens (débordement)
Comment puis-je supprimer toutes les marges de bootstrap container-fluid
classe et ses lignes?
.container-fluid { padding: 0;}
Ce n'est, fondamentalement, ce que je veux, mais il ajoute 20px débordement à corps. Donc dois-je viens de le faire:
body, html { overflow-x: hidden; }
Faire quelque chose avec .container-fluid > .row
source d'informationauteur niksos
Vous devez vous connecter pour publier un commentaire.
Pour être précis au sujet de votre question:
La
.row
a un négatif à gauche et à droite de la marge égale à la gauche/droite de la valeur de remplissage de lacol-*-*
c'est pourquoi il y a des barres de défilement horizontale lorsque vous jouer avec la grille, sans comprendre comment il fonctionne. Si vous manipulez la colonne classes avec zéro de remplissage sur la gauche et la droite ou avec une autre valeur, la marge négative sur l' .la ligne doit être égale à la marge à gauche et à droite de la colonne des classes. L' .conteneur dispose également d'un rembourrage qui correspond à la valeur de la colonne classes pour éviter les barres de défilement.Donc la réponse est:
.container-fluid > .row
- margin:0 sur la gauche et sur la droite si vous retirez le rembourrage sur la gauche et à droite de la colonne de classes. Si tout est égal à zéro, alors vous pouvez ajuster l' .conteneur ou .conteneur de fluide avec zéro de remplissage sur la gauche et la droite, mais si vous utilisez de différentes valeurs > 15px L & R, alors c'est une autre histoire que la.container/.container-fluid
devra être ajustée si la gauche et la droite de rembourrage sur les colonnes est supérieur à 15px.Il n'y a pas de marges sur les
col-*-*
c'est de rembourrage qui est tout à fait différent lorsque vous utilisez box-sizing:border-box à l'échelle mondiale comme Bootstrap 3.Si vous voulez un serré de la grille, retirez tout le rembourrage sur la gauche et droit de l'ensemble de la colonne de classes et puis supprimer la négatif marge sur le gauche et droit de la
.row
et ensuite vous pouvez enlever la gauche et la droite rembourrage sur le.container
.DÉMO: http://jsbin.com/jeqase/2/
Supprime tous rembourrage et de la marge négative à une surveillance étroite de la grille et de la totalité de la largeur de l' .conteneur avec les élément (body, html, peu importe) avec la classe
.alt-grid
:Vous pouvez aussi le faire avec
.container-fluid
- la seule chose à zéro est la gauche et la droite rembourrage.Si vous souhaitez supprimer la marge, overidding la classe de Bootstrap ou div (container-fluid, html, body) n'est pas la meilleure chose à faire. Je pense qu'il est préférable de créer une catégorie distincte et l'ajouter dans les éléments.
Si vous souhaitez supprimer toutes les marges :
Si vous souhaitez supprimer toutes les marges externes et internes :
il est toujours une meilleure façon d'ajouter une classe personnalisée pour les éléments que vous voulez vous débarrasser de la marge au lieu de remplacer tous les fichiers d'amorce éléments.
row.no-margin{
margin:0 ! important;
}