Comment puis-je mettre la marge entre div dans le bootstrap?

je viens de commencer à travailler sur bootstrap css design, j'ai envie de mettre quelques 5px de la marge entre la boîte, j'ai créé, et cette marge doit être Constante, si j'ai à nouveau la taille des navigateurs

mon code html est comme ceci :

<div class="container">
        <div class="row">
            <div class="col-md-3  col-sm-6 col-xs-12">
                <div style="height: 121px; background-color: orange; width:100%;">
                    <label>Box 1</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: wheat; width:100%;">
                    <label>Box 2</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: beige ;width:100%;">
                    <label>Box 3</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: chocolate; width:100%;">
                    <label>Box 4</label>
                </div>
            </div>
        </div>
                </div>

donc en html ci-dessus, j'ai utilisé des div avec des couleurs de fond. et je veux mettre une marge d'entre eux.

source d'informationauteur patel

  1. 8

    Le problème avec votre code dans bootstrap est que les colonnes (<div class="col-*"></div>) ont coutume de rembourrage. Il y aura toujours de la même largeur entre votre divs, mais pas toujours égale à la hauteur (sauf si vous commencez à ajouter bootstrap lignes qui est géré de la même manière à la verticale et les colonnes sont à l'horizontale avec un rembourrage).

    Pour résoudre ce problème dans votre cas, vous avez juste besoin d'ajouter un rembourrage pour votre divs. DÉMO

     <div class="container">
    <div class="row">
        <div class="col-md-2  col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: orange;">
                <label>Box 1</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: wheat; ">
                <label>Box 2</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: beige; ">
                <label>Box 3</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: chocolate;">
                <label>Box 4</label>
            </div>
        </div>
    </div>
</div>
  2. 1

    À la suite de la cannonical façon d'ajouter de la marge et le remplissage dans le Bootstrap, vous pouvez le faire.

    Classes format:

    • {property}{sides}-{size} pour xs

    • {property}{sides}-{breakpoint}-{size} sm, md, lg, et xl.

    Où property est l'un des:

    • m - pour les classes qui définissent la marge
    • p - pour les classes qui padding

    Où sides est l'un des:

    • t - pour les classes qui définissent margin-top ou padding-top
    • b - pour les classes qui définissent margin-bottom ou padding-bottom
    • l - pour les classes de définir la marge gauche ou padding-left
    • r - pour les classes qui définissent la marge de droite ou de padding-right
    • x - pour les classes qui définissent à la fois: *à gauche et à droite
    • y - pour les classes qui définissent à la fois *et des *-bas
    • vide - pour les classes de définir une marge ou de rembourrage sur les 4 côtés de l'élément

    Où size est l'un des:

    • 0 - pour les classes qui permettent d'éliminer la marge ou de rembourrage par la valeur 0
    • 1 - (par défaut) pour les classes qui définissent la marge ou le rembourrage à $entretoise * .25
    • 2 - (par défaut) pour les classes qui définissent la marge ou le rembourrage à $entretoise * .5
    • 3 - (par défaut) pour les classes qui définissent la marge ou le rembourrage à $entretoise
    • 4 - (par défaut) pour les classes qui définissent la marge ou le rembourrage à $entretoise * 1.5
    • 5 - (par défaut) pour les classes qui définissent la marge ou le rembourrage à $entretoise * 3

    Exemples

    1. Rembourrage * 1.5 de tous les côtés: <div class="p-4">
    2. Marge par défaut sur le dessus: <div class="mt-3">
    3. Rembourrage * 0,25 à gauche et à droite: <div class="px-1">

    Plus d'infos sur leur page, sous Utilitaires > Espacement: https://getbootstrap.com/docs/4.0/utilities/spacing/