web-dev-qa-db-fra.com

Comment puis-je ajouter une marge entre bootstrap colonnes sans wrapping

Ma mise en page ressemble actuellement à ceci

Current Layout

Dans la colonne centrale, je souhaite ajouter une petite marge entre chaque Server Div. Mais, si j'ajoute une marge au CSS, il finit par un retour à la ligne et ressemble à ceci

Attempted Change

<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 essayé d'ajouter les marges en faisant cela

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

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

htmlcsstwitter-bootstraptwitter-bootstrap-3
142
Andy

Vous devez travailler avec un rembourrage sur le conteneur interne plutôt qu'avec une marge. Essaye ça!

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;
}
162
Charles Ingalls

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>

Cela rendra automatiquement un peu d'espace entre les 2 divs. enter image description here

64
krishna kinnera

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

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

Changer le nombre de @grid-columns. Ensuite, utilisez -offset. Changer le nombre de colonnes vous permettra de contrôler la quantité d'espace entre les colonnes. Par exemple.

variables.less (ligne 294 environ).

@grid-columns:              20;

someName.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>
25
Shaun Luttin

La manière simple de faire ceci est de faire une div au sein 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>
5
Ricardo Flores