Comment ajouter un espacement entre les colonnes dans Bootstrap?
Je suis sûr qu'il existe une solution simple à ce problème. Fondamentalement, si j'ai deux colonnes, comment puis-je ajouter un espace entre elles?
par exemple. si le html est:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Le résultat serait simplement deux colonnes juxtaposées occupant toute la largeur de la page. Supposons que la largeur a été définie sur 1000px, chaque div étant alors 500px large.
Si je voulais un 100px espace entre les deux, comment pourrais-je y parvenir? Evidemment, automatiquement, par bootstrap, les tailles de div deviendraient 450px chacune pour compenser l'espace
Vous pouvez obtenir un espacement entre les colonnes en utilisant les classes col-md-offset-*, décrites ici . L'espacement est cohérent, de sorte que toutes vos colonnes s'alignent correctement. Pour obtenir un espacement uniforme et la taille de la colonne, procédez comme suit:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
Je faisais face au même problème. et ce qui suit a bien fonctionné pour moi. J'espère que cela aidera quelqu'un à atterrir ici:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
Cela va automatiquement rendre un peu d'espace entre les 2 divs.
Je sais que je suis en retard à la fête, mais vous pouvez essayer d'espacer les boîtes avec du rembourrage.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Essayer
Utilisez la classe .form-group de bootstrap. Comme ça dans ton cas:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
J'ai eu des problèmes similaires avec l'espace entre les colonnes. Le problème fondamental est que les colonnes de bootstrap 3 et 4 utilisent un remplissage à la place de la marge. Ainsi, les couleurs de fond de deux colonnes adjacentes se touchent.
J'ai trouvé une solution qui convient à notre problème et qui fonctionnera très probablement pour la plupart des personnes essayant d'espacer les colonnes et de conserver les mêmes largeurs de gouttière que le reste du système de grille.
C'était le résultat final que nous recherchions
Avoir le vide avec une ombre portée entre les colonnes était problématique. Nous ne voulions pas d'espace supplémentaire entre les colonnes. Nous voulions simplement que les gouttières soient "transparentes" afin que la couleur de fond du site apparaisse entre deux colonnes blanches.
c'est le balisage pour les deux colonnes
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
Cette approche nécessite une division interne avec des marges négatives, tout comme la classe "row" utilisée par bootstrap. Et cette div, nous l'avons appelée "raised-block", doit être le frère direct d'une colonne
De cette façon, vous obtenez toujours un bon rembourrage dans vos colonnes. J'ai vu des solutions qui semblent fonctionner en créant de l'espace, mais malheureusement, les colonnes qu'elles créent ont un remplissage supplémentaire de chaque côté de la ligne, ce qui finit par rendre la ligne plus fine pour laquelle la grille a été conçue. Si vous regardez l'image pour l'aspect souhaité, cela signifierait que les deux colonnes ensemble seraient plus petites que celle plus grande en haut, qui casse la structure naturelle de la grille.
L'inconvénient majeur de cette approche est qu'elle nécessite un balisage supplémentaire enveloppant le contenu de chaque colonne. Pour nous, cela fonctionne car seules des colonnes spécifiques ont besoin d'espace entre elles pour obtenir l'aspect souhaité.
Cela laissera un espace entre les deux colonnes et, évidemment, si vous voulez changer la largeur par défaut, vous pouvez utiliser mixins pour modifier la largeur par défaut du bootstrap. Ou, vous pouvez donner la largeur en utilisant le style CSS intégré.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
vous pouvez utiliser background-clip et box-model avec la propriété border
.box{
box-model: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
Vous pouvez obtenir un espacement entre les colonnes à l'aide des classes col-xs- *, au sein d'un div col-xs- * codé ci-dessous. L'espacement est cohérent, de sorte que toutes vos colonnes s'alignent correctement. Pour obtenir un espacement uniforme et la taille de la colonne, procédez comme suit:
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
Bootstrap 4 , fichier custom.scss vous pouvez ajouter le code suivant:
$grid-Gutter-width-base: 20px;
$grid-Gutter-widths: ( xs: $grid-Gutter-width-base,
sm: $grid-Gutter-width-base,
md: $grid-Gutter-width-base,
lg: $grid-Gutter-width-base,
xl: $grid-Gutter-width-base
);
par défaut, $ grid-Gutter-width-base: 30px;
À l’intérieur du col-md- ?, créez une autre div et placez une image dans cette div, puis ajoutez facilement un rembourrage de la sorte.
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
Je devais trouver comment faire cela pour 3 colonnes. Je voulais contourner les coins des divs et je ne pouvais pas obtenir l'espacement au travail. J'ai utilisé les marges. Dans mon cas, je pensais que 90% de l'écran devait être rempli par les divs et 10% pour les marges:
html:
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
et CSS:
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
Pour le redimensionner correctement pour les appareils mobiles, le CSS a modifié la largeur de 30% à width:92.5%; sous @media (max-width:1023px).
Il me fallait une colonne sur le portable et deux colonnes de Portrait de la tablette vers le haut, avec un espacement égal entre elles au milieu (également sans aucun remplissage ajouté à la grille dans les colonnes). Pourrait être réalisé en utilisant des utilitaires d'espacement et en omettant le nombre dans col-md:
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
<div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
</div>
</div>
Je sais que ce post est un peu daté, mais je suis tombé sur le même problème. Exemple de mon HTML.
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
Afin de créer un espace entre les groupes, j'ai redéfini la marge de -15px de bootstrap dans mon fichier site.css en réduisant la marge négative de 5.
Voici ce que j'ai fait ...
.form-group {
margin-right: -10px;
}
J'espère que cela aide quelqu'un d'autre.
Pourquoi ne pas ajouter une bordure de la même couleur que l’arrière-plan en utilisant css? Je suis nouveau dans ce domaine, alors peut-être y a-t-il une bonne raison de ne pas le faire, mais ça avait l'air bien quand j'ai essayé.
Ce sera utile ..
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>Si vous souhaitez augmenter ou diminuer davantage la marge dans la partie droite de la zone, éditez simplement la propriété margin-right de list-item.
exemple de sortie
Manière simple
.row div{
padding-left: 8px;
padding-right: 8px;
}
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
Ceci fournit par défaut un peu de remplissage à l'intérieur de la div externe comme vous semblez le souhaiter. De plus, vous pouvez également modifier le remplissage à l'aide de CSS personnalisé.
Juste une bordure blanche autour de l'élément d'enveloppe
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
et premier + dernier enfant sans frontière
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
Pour obtenir un espacement particulier entre les colonnes, nous devons configurer padding dans la présentation standard de Bootstrap.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}<div class="container-fluid space-100-px">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Left" alt="Left">
</div>
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Right" alt="Right">
</div>
</div>
</div>Puisque vous utilisez bootstrap, je suppose que vous voulez faire le chose responsive. Dans ce cas, vous ne devriez pas utiliser de tailles fixes, comme par exemple "px".
Pour contourner d'autres solutions, je propose que les deux colonnes soient "col-md-5" au lieu de "col-md-6", puis dans l'élément parent "rangée" qui contient les colonnes, ajoutez la classe "justifier-contenu -between ", qui place l'espace libre au milieu, comme vous pouvez le vérifier dans le document d'amorçage ici
Cette solution est également valable pour plus de deux colonnes en ajustant le "col-md-x" bien sûr
j'espère que ça aide ;)
<div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
c'est simple ... vous devez ajouter une bordure solide à droite, à gauche de la colonne * et cela devrait être travail .. :)
cela ressemble à ceci: http://i.stack.imgur.com/CF5ZV.png
HTML:
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS:
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
Bootstrap 4
La documentation dit ( ici ):
Les lignes sont des wrappers pour les colonnes. Chaque colonne a un remplissage horizontal (appelé gouttière) pour contrôler l’espace entre elles. Ce remplissage est ensuite neutralisé sur les lignes avec des marges négatives. De cette manière, tout le contenu de vos colonnes est aligné visuellement sur le côté gauche.
La bonne réponse est donc la suivante: définissez le paramètre padding-left/right de cols égal à moins votre marge-left/right de row. C'est simple.
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
Démo: https://codepen.io/frouo/pen/OqGaWN
Bootstrap 4 - Séparez les colonnes en utilisant des lignes imbriquées.
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
Selon Bootstrap 4 documentation , vous devez donner au parent une marge négative mx-n* et aux enfants un remplissage positif px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>