bootstrap margenes col-md

[fanatimillo]

Hola gente, antes que nada muchas gracias por su tiempo en responder
Tal vez sea una pregunta super sencilla pero la verdad que yo, que aun soy muy novato en bootstrap, no le he podido resolver, tengo una estructura bastante sencilla como

Código:

<div class="row">
  <div class="col-md-3" style="background:#f00">col con fondo rojo</div>
  <div class="col-md-9" style="background:#069">col con fondo azul</div>
</div>

al poner esto asi, y obviamente lo hace pone las dos columnas una pegada a la otra, lo que yo quiero es dejar un margen de al menos 20px entre la columna roja y azul...... y sinceramente no le encuentro la forma, porque claro esta q si pongo un style a la col azul automaticamente la manda para abajo.......

alguna sugerencia?

muchas gracias

[Luccyan]

http://www.bootply.com/OS6FX9sie8#


talvez esto te sirva

el espacio lo generan dando un "margin"

[siddartha23]

Mira, se me ocurre que podrías hacerlo de esta manera: dentro de cada una de tus columnas metes una fila (row) y le dices que ocupen todo el espacio (col-md-12) y dentro de la fila donde quieres el espacio le añades un padding con la cantidad de separación que quieres, esto último te sugiero hacerlo mediante un media query en tu hoja de estilos ya que no vas a poder controlarlo mediante alguna clase especial para que se acomode todo correctamente en dispositivos móviles, prueba este código y te va quedar mas claro:

Código HTML:

<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12" style="background:#f00">col con fondo rojo</div>
        </div>
    </div>
 
    <div class="col-md-9">
        <div class="row" style="padding-left:20px">
            <div class="col-md-12" style="background:#069">col con fondo azul</div>
        </div>
    </div>
</div>
 

[JustinKO]

Bootstrap te crea por defecto los "márgenes" (pongo entre comillas porque no son márgenes) con 15px de padding en las columnas. Al rellenar la columna de color se te colorea toda la columna.
Prueba a incluir un div dentro del col-md-loquesea y dale a este div el color.
Algo así:

Código HTML:

<div class="row">
  <div class="col-md-3" >
       <div style="background:#f00">col con fondo rojo</div>
</div>
<div class="col-md-9">
    <div style="background:#069">col con fondo azul</div>
</div>
 

Saludos