web-dev-qa-db-fra.com

Bootstrap: ajoute de la marge/espace entre les colonnes

J'essaie de mettre un espace de marge/de remplissage supplémentaire entre les colonnes sur la disposition de ma grille Bootstrap. J'ai essayé ça mais je n'aime pas le résultat. Voici mon code:

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

Je veux ajouter margin: 10px et padding:10px. Certaines personnes suggèrent de changer leurs classes en col-md-5 avec pull-left et pull-right, mais l'écart entre elles sera trop grand.

htmlcsstwitter-bootstrap
44
bodruk

Mise à jour 2018

Bootstrap 4 dispose maintenant de utilitaires d'espacement qui facilitent l'ajout (ou la soustraction) de l'espace (gouttière) entre les colonnes. Extra CSS n'est pas nécessaire.

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

Vous pouvez ajuster les marges du contenu de la colonne en utilisant les utilitaires marge tels que ml-0 (marge gauche: 0), mr-0 (marge droite: 0), mx-1 (marges gauche et droite de 0,25rem ), etc...

Ou, vous pouvez ajuster le remplissage des colonnes (col- *) à l'aide des utilitaires remplissage tels que pl-0 (remplissage à gauche: 0) , pr-0 (remplissage à droite: 0), px-2 (remplissage à gauche et à droite .50rem), etc ...

Démonstration Bootstrap 4 Column Spacing

Remarques

  • Changer la ou les marges gauche/droite sur col-* brisera la grille.
  • Modifiez la ou les marges gauche/droite sur le contenu de col-* fonctionne.
  • Changer le remplissage gauche/droit sur le col-* fonctionne également.
14
Zim

Ajoutez simplement un div dans col-md-6 qui possède le remplissage supplémentaire dont vous avez besoin. Le col-md-6 est la "colonne vertébrale" pour conserver l'intégrité de la colonne, mais vous pouvez y ajouter un remplissage supplémentaire.

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }
82
Jon Harding

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">
     Set room heater temperature
   </div>
 </div>
 <div class="col-md-6">
   <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
</div>

 enter image description here

Cela va automatiquement rendre un peu d'espace entre les 2 divs.

12
krishna kinnera

Super facile avec flexbox. Laissez de la place pour de l'espace en modifiant les colonnes en col-md-5 

<div class="row widgets">
    <div class="text-center col-md-5">
        Widget 1
    </div>
    <div class="text-center col-md-5">
        Widget 2
    </div>
</div>

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}
1
eosimosu

Ajoutez simplement la classe 'justifier-contenu-autour'. cela ajouterait automatiquement un écart entre 2 divs.

Documentation: https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment

Échantillon:

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
</div>
1
Madhukar Hiriadka

Je voudrais garder une colonne supplémentaire au milieu pour les plus grands affichages et réinitialiser les valeurs par défaut lorsque les colonnes se réduisent à des affichages plus petits. Quelque chose comme ça:

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>
1
thethakuri

J'ai eu le même problème et j'ai résolu le problème en imbriquant une div dans bootstrap _col et en y ajoutant un rembourrage. Quelque chose comme:

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
 </div>
</div>
0
rinnegan

Vous pouvez utiliser les classes Bootstrap 4 de remplissage et de marge abrégées comme suit:

Pour les très petits appareils, c.-à-d. Xs

{property}{sides}-{size}

Pour les autres appareils/fenêtres (petites, moyennes, grandes et très grandes)

{property}{sides}-{breakpoint}-{size}

Où:

property = m for margin and p for padding

Voici les significations abrégées des côtés:

l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides

Le point d'arrêt = sm, md, lg et xl.

En combinant tout ce qui précède, le code complet de remplissage à gauche peut être (par exemple):

Pour un rembourrage à gauche dans les très petits appareils

pl-2

ou pour moyen à extra large

pl-md-2

0
karimeh

Si vous souhaitez supprimer le double remplissage entre les colonnes, ajoutez simplement la classe "nogap" dans la ligne.

<div class="row nogap">
    <div class="text-center col-md-6">Widget 1</div>
    <div class="text-center col-md-6">Widget 2</div>
</div>

et créer une classe css supplémentaire pour elle

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

Ça y est, vérifiez ici: https://codepen.io/michal-lukasik/pen/xXvoYJ

0
mihau

Essaye ça:

 <div class="row">
    <div class="text-center col-md-6">
       <div class="col-md-12"> 
          Widget 1
       </div>
    </div>
    <div class="text-center col-md-6">
        <div class="col-md-12"> 
          Widget 2
        </div>
    </div>
</div>
0
omar faruque

Pour ceux qui cherchent à contrôler l’espace entre un nombre dynamique de colonnes, essayez:

<div class="row no-gutters">
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <!-- etc. -->
</div>

CSS:

.col:not(:last-child) .inner {
  margin: 2px; // Or whatever you want your spacing to be
}
0
Chris Haines