Je voudrais que mon contenu soit fluide, mais quand .container-fluid
avec la grid de Bootstrap, je vois encore du padding. Comment puis-je me débarrasser du rembourrage?
Je vois que je n’obtiens pas le padding avec .row, mais je veux append des colonnes, et dès que je le fais, le remplissage est de retour: O.
Je veux pouvoir utiliser les colonnes en pleine largeur.
Un exemple:
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
Solution que j’ai:
Remplacez bootstrap.css, linke 1427 et 1428 (v3.2.0)
rembourrage à droite: 15px; padding-left: 15px;
à
padding-right: 0px; padding-left: 0px;
- Largeur parfaite de 100% du conteneur parent pour une entrée Bootstrap?
- Entête centrale Bootstrap
- Bootstrap 3 incendies modaux et provoque le décalage de la page vers la gauche momentanément / problèmes de la barre de défilement du navigateur
- Élément de menu d’exclusion de la réduction de la barre de navigation bootstrap 3
- Comment puis-je contrôler la vitesse à laquelle glisse le carrousel dans les éléments?
Vous devriez également append une “ligne” à chaque conteneur qui “corrigera” ce problème!
Some text
S’il vous plaît trouver le css réel de Bootstrap
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { margin-right: -15px; margin-left: -15px; }
Lorsque vous ajoutez une classe .container-fluid
, elle ajoute un remplissage horizontal de 15px et la même chose sera supprimée lorsque vous ajoutez une classe .row
tant qu’élément enfant par la marge négative définie sur la ligne.
Je pense que j’avais les mêmes exigences que Tim, mais aucune des réponses ne permettait de définir une colonne “bord à bord” avec solution de gouttière interne normale. Ou une autre façon de le dire: comment faire en sorte que mes premières et dernières colonnes pénètrent dans le remplissage du conteneur et se dirigent vers le bord de la fenêtre, tout en conservant les gouttières normales entre les colonnes.
De ce que je peux dire, il n’y a pas de solution nette et propre. C’est ce qui fonctionne pour moi, mais il se situe bien en dehors de tout ce qui serait pris en charge par Bootstrap. Mais cela fonctionne pour l’instant (Bootstrap 3.3.5 et 4.0-alpha).
http://www.bootply.com/ioWBaljBAd
Exemple HTML:
… … … …
CSS:
.full-width-row { overflow-x: hidden; } .full-width-row > div { margin-left: -15px; margin-right: -15px; }
L’astuce consiste à imbriquer un div
entre la ligne et les colonnes pour générer la marge supplémentaire de -15px à insérer dans le remplissage du conteneur. La marge négative supplémentaire crée un défilement horizontal (dans les espaces) dans les petites fenêtres. Ajouter overflow-x: hidden
à .row
est nécessaire pour le supprimer.
Cela fonctionne de la même manière pour .container-fluid
que .container
.
Vous avez seulement besoin de ces propriétés CSS dans la classe .container de Bootstrap et vous pouvez y placer le système de grid normal sans que le contenu du conteneur ne soit hors de lui (sans scroll-x dans la fenêtre).
HTML:
Your content here! ... ... more rows
CSS:
/* Bootstrap custom */ .container{ padding-left: 0rem; padding-right: 0rem; overflow: hidden; }
Dans les nouvelles versions alpha, ils ont introduit des classes d’espacement des utilitaires . La structure peut alors être modifiée si vous les utilisez de manière intelligente.
Espacement des classes d’utilité
… … … …
pl-0
et pr-0
suppriment le remplissage en tête et en queue des colonnes. Les lignes incorporées d’une colonne restnt un problème car elles ont toujours une marge négative. Dans ce cas:
Différences de version
Notez également que les classes d’espacement des utilitaires ont été modifiées depuis la version 4.0.0-alpha.4
. Avant, ils étaient séparés par 2 tirets, par exemple => px-0
et pl-0
et ainsi de suite …
Pour restr dans le sujet de la version 3: C’est ce que j’utilise sur les projets Bootstrap 3 et inclure la configuration de la boussole, pour cet utilitaire d’espacement particulier, dans bootstrap-sass
(version 3) ou bootstrap
(version 4.0.0-alpha.3) avec des tirets doubles ou bootstrap
(version 4.0.0-alpha.4 et supérieure) avec des tirets simples.
En outre, la dernière version monte jusqu’à 5 fois le ratio (ex: pt-5
padding-top 5) au lieu de seulement 3.
Boussole
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default; @import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix @import "../scss/utilities/_spacing.scss";
Sortie CSS
Vous pouvez bien sûr toujours copier / coller les classes d’espacement de remplissage uniquement à partir d’un fichier css généré.
.p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pr-1 { padding-right: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-left: 0.25rem !important; } .px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-left: 0.5rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .p-3 { padding: 1rem !important; } .pt-3 { padding-top: 1rem !important; } .pr-3 { padding-right: 1rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pl-3 { padding-left: 1rem !important; } .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pl-4 { padding-left: 1.5rem !important; } .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .p-5 { padding: 3rem !important; } .pt-5 { padding-top: 3rem !important; } .pr-5 { padding-right: 3rem !important; } .pb-5 { padding-bottom: 3rem !important; } .pl-5 { padding-left: 3rem !important; } .px-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
Si vous travaillez avec le configurateur, vous pouvez définir la @grid-gutter-width
de la @grid-gutter-width
de 30px
à 0
J’ai utilisé
et cela semble fonctionner.
- Utiliser le menu déroulant Bootstrap 3 comme menu contextuel
- Comment supprimer l’espace de gouttière pour un div uniquement – bootstrap
- Bootstrap: champ de saisie plus large
- Bootstrap – Suppression du remplissage ou de la marge lorsque la taille de l’écran est plus petite
- Twitter Bootstrap modal sur les appareils mobiles
- Conteneurs Bootstrap multiples et / ou nesteds?
- «Untaught SyntaxError: jeton inattendu {» dans Bootstrap 2.1.0 fourni avec Joomla! 3.0
- Définir la largeur d’un groupe de boutons à 100% et faire en sorte que les boutons aient la même largeur?
- Bootstrap 3 avec Modal distant
- Comment puis-je changer les colonnes de textarea dans twitter-bootstrap?