Cómo agrego un margen entre columnas bootstrap sin envolver

Mi diseño actualmente se ve así

Diseño Actual

En la columna central, quiero agregar un pequeño margen entre cada Div Server. Pero, si agrego un margen al CSS, termina envolviendo la línea y luciendo así

Intento de Cambio

<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 añadir un margen a los DIVs para que no dejen tanto espacio en el lado derecho?

Author: Ajay Gupta, 2013-09-25
Source

5 answers

Debe trabajar con relleno en el contenedor interior en lugar de con margen. ¡Prueba esto!

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;
}
 151
Author: Charles Ingalls,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 16:30:00

Si no necesita agregar un borde en las columnas, también puede simplemente agregar un borde transparente en ellas: 

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}
 54
Author: Seb33300,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-16 13:24:40

Estaba enfrentando el mismo problema; y lo siguiente funcionó bien para mí. Espero que esto ayude a alguien a aterrizar aquí: 

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

Esto renderizará automáticamente un poco de espacio entre los 2 divs. introduzca la descripción de la imagen aquí

 51
Author: krishna kinnera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-09 11:03:14

Cambie el número de @grid-columns. A continuación, utilice -offset. Cambiar el número de columnas le permitirá controlar la cantidad de espacio entre columnas. Por ejemplo,

Variables.menos (aproximadamente línea 294).

@grid-columns:              20;

Un nombre.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>
 22
Author: Shaun Luttin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-06 23:48:09

La forma sencilla de hacer esto es hacer un div dentro de un 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>
 4
Author: Ricardo Flores,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-15 16:34:48