J'ai fait un peu de recherche ici sur Stackoverflow sur la façon de résoudre ce problème de manière efficace, mais je n'ai toujours pas semblé trouver exactement ce que je cherche.
Fondamentalement, j'ai trois colonnes qui Je veux uniformément espacé et centré sur ma page. Toutefois, lorsque je fixe Col-MD-4 pour les trois colonnes, le résultat final est qu'ils sont tous recueillis les uns aux autres. Comment puis-je le faire pour qu'il y ait de l'espace entre les colonnes? Comme 10-15px ou donc sans les forcer à une autre rangée.
Voici quelques exemples de code: Peut-être que je fais quelque chose de mal mais je fais juste quelque chose de mal mais je fais juste quelque chose de mal mais je fais juste quelque chose de mal mais je fais juste quelque chose de mal mais je fais juste quelque chose de mal mais je fais juste quelque chose de mal mais je veux juste faire quelque chose de mal mais Je ne peux pas sembler comprendre comment faire ce travail. J'ai vu plusieurs personnes suggérer de les mettre dans une autre div avec un peu de rembourrage, mais cela ne semble pas fonctionner pour moi. Merci pour une aide! Je suis ouvert à toutes les suggestions!
7 Réponses :
Un moyen «hacky» de faire ce que vous voulez, c'est donner aux colonnes une bordure de la même couleur que l'arrière-plan.
En réalité, votre code crée déjà des espaces entre les colonnes, car dans Bootstrap, la colonne a 15Px Rembourrage de chaque côté.
Votre code fonctionne normalement, cochez ici: http://www.bootply.com/h6dqgdzxgy
Mais vous pouvez voir que cela ne fonctionne pas comment je le souhaite à ce code: bootply.com/utax6asnhj mon Les colonnes ont des couleurs de fond différentes de sorte que la colonne elle-même est "visible". Donc, dans l'exemple ci-dessus, je voudrais voir l'espace blanc entre les colonnes.
@Quiver Vous devez régler le style d'arrière-plan sur le
qui se trouve à l'intérieur de la colonne, pas la colonne elle-même. ...
C'était ça! Une erreur recrue. Merci pour ton aide!
Vous avez la possibilité d'utiliser la colonne compensatoire COL-MD-Offset- *. Vous ne seriez pas en mesure de conserver l'espacement de vos colonnes (réduisez 4 à 3), mais je pense que cela devrait quelque peu faire le travail pour un espacement réactif.
Vérifiez ceci: Twitter Système de grille de bootstrap. Espacement entre les colonnes
Cela ne ferait-il pas que les colonnes soient-elles hors centre? Si vous connaissez un moyen de les centrer pendant que vous y compris les compensations, faites le moi savoir! Je suis toujours nouveau à tout ça!
Cela le ferait très certainement. Vous devriez essentiellement ajouter le décalage à chaque côté afin de recevoir l'effet souhaité. Voyant que votre question fait référence à beaucoup moins d'effet que le décalage est nécessaire pour que je dirais que la réponse de Shadi1024 vous convient parfaitement.
Vous pouvez faire quelque chose comme: Vous pouvez ajouter un contenu pour l'envelopper, sinon vous aurez ces règles appliquées à toutes les colonnes de votre mise en page!
alors vous pouvez utiliser: ou vous pouvez créer juste une classe comme: et ensuite vous appliquez cette classe sur votre cols acclamations
espacé Col puis ajoutez un remplissage sur celui-ci:
Il n'a pas demandé un espacement réactif, a-t-il déclaré "comme 10-15px ou donc sans les forcer à une autre rangée."
Et, s'il veut une marge / un rembourrage réactif, il peut simplement changer le 15/10px à% à% :)
Si vous utilisez un rembourrage et modifiez la couleur d'arrière-plan, vous remarquerez peut-être que les couleurs des colonnes n'ont pas beaucoup d'espacement entre eux.
Peut-être une meilleure option serait
C'est une réponse tardive, mais je suppose que certaines personnes peuvent être interessées par une autre explication.
Le système "COLS" BOOTSTRAP n'est pas fait pour décorer mais de placer des éléments dans les pages. Si vous avez besoin d'espacer les contenus de colonne, vous devez envelopper votre contenu: alors vous pouvez ajouter un espacement sur "Col-espacé" en utilisant le remplissage Notez que:
Vous pouvez mettre un autre div pour placer votre contenu à l'intérieur du .Col DIV, comme exemple ci-dessous: le voir fonctionnant ici: https://codepen.io/pmfeo/pen/rvxpxg que div ajustera à son rembourrage parent.
Il devrait y avoir des espaces entre
col - ** - N .Col - ** - N La classe a des ensembles par défaut dePadding-gauche etPadding-droite et le montant est corrigé par15px < / code>. Puis-je voir votre propre CSS?Dupliqué possible de Système de grille Bootstrap Twitter. Espacement entre les colonnes