Comment ajouter une marge entre les colonnes de bootstrap sans les envelopper ?

Question

Ma présentation actuelle est la suivante

Dans la colonne centrale, je souhaite ajouter une petite marge entre chaque Server Mais si j'ajoute une marge au CSS, il finit par s'enrouler autour de la ligne et ressemble à ceci

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

Et le CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

J'ai tenté d'ajouter les marges en procédant comme suit

.info-panel  > div {
    margin: 4px;    
}

Comment puis-je ajouter une marge aux DIVs afin qu'ils ne laissent pas trop d'espace sur le côté droit ?

Answer 1

Il est préférable d'utiliser le remplissage du conteneur interne plutôt que la marge. Essayez ceci !

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
    padding: 5px;
}

Answer 2

J'ai été confronté au même problème et la solution suivante a bien fonctionné pour moi :

<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>

Cela créera automatiquement de l'espace entre les deux divs.

Answer 3

Si vous n'avez pas besoin d'ajouter une bordure sur les colonnes, vous pouvez aussi simplement ajouter une bordure transparente sur celles-ci :

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}

Answer 4

Modifier le nombre de @grid-columns . Ensuite, utilisez -offset . En modifiant le nombre de colonnes, vous pourrez contrôler l'espace entre les colonnes. Par exemple

variables.less (environ ligne 294).

@grid-columns:              20;

unNom.html

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>

Answer 5

La manière la plus simple d'y parvenir est de créer une div à l'intérieur d'une div.

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>