¿Cómo agrego un margen entre las columnas de bootstrap sin envolver [duplicar]
Esta pregunta ya tiene una respuesta aquí:
¿Cómo agrego espacio entre columnas en Bootstrap? 22 respuestasMi diseño actualmente se ve así
En la columna central, quiero agregar un pequeño margen entre cadaServer
Div. Pero, si agrego un margen al CSS, termina el ajuste de línea y se ve así
<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>
Y el 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;
}
Intenté agregar los márgenes haciendo esto
.info-panel > div {
margin: 4px;
}
¿Cómo puedo agregar un margen a los DIV para que no dejen tanto espacio en el lado derecho?